Автоматическое изменение высоты iframe по его содержимому на jQuery

Автоматическое изменение высоты iframe по его содержимому на jQuery

Иногда требуется разместить iframe на странице сайта содержащий раскрывающийся списки, слайдеры, т.е. высота фрейма может меняться. Но у iframe всегда фиксированная высота и появляются полосы прокрутки.

Чтобы это исправить достаточно добавить jQuery скрипт который будет отслеживать изменения в дереве DOM фрейма и плавно изменять его высоту.

<iframe class="frame" src="http://site.ru"></iframe>

<script>
$(function() {
   $('.frame').load(function(){
		var target = this;
		var content = $(target).contents().find('body');
		$(target).height($(content).outerHeight(true));

		$(content).on("DOMSubtreeModified click", function (event){
			setTimeout(function(){
				$(target).stop().animate({height: $(content).outerHeight(true)}, 200);
			}, 400);
		});
	});
});
</script> 
HTML

Пример работы скрипта:

12.11.2017, обновлено 11.09.2022
16296

Комментарии

, чтобы добавить комментарий.

Другие публикации

Location – URL текущей страницы
Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения...
42598
-1
Размеры Iframe
Если у указать width 100%, то он растянется на всю ширину родителя, но height 100% так не работает.
25438
+1
Настройка плеера YouTube
Список параметров для настройки функций плеера YouTube, полное описание в документации на developers.google.com.
35482
+6
Адаптивные плееры Youtube на десктопах и мобильных
Проблема плеера в том что у него нефиксированные размеры, поэтому возникают трудности на адаптивных сайтах. Ширину...
7467
+5
Обновить страницу с помощью JS / HTML / PHP
Сборник методов для перезагрузки страницы или вкладки браузера.
128827
+6
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
63869
+2