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

Иногда требуется разместить 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, обновлено 16.09.2019 2274

Поделится

Темы

HTML jQuery JS

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

Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
11.12.2016 1205
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
04.03.2018 9207
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
26.10.2018 2094
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...
16.10.2018 2714
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018 4634
Виджет на JQuery и AJAX, который покажет результаты поиска непосредственно при вводе в текстовое поле.
25.09.2019 122