JS/jQuery

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

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

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

<iframe class="frame" src="/view/"></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> 

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

12 ноября 2017