Как динамически изменять высоту iframe?

Question

[exitialis]

Приветствую, уважаемые пользователи хабра! Возникла такая проблема: есть iframe на странице. В этот iframe подгружается другое веб-приложение, которое динамически обновляет содержимое iframe при помощи ajax. И возник вопрос, каким образом мне изменять высоту iframe в зависимости от контента, который находится внутри него? Раньше работало вот это:

function resizeIframe(obj){
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }

Но это работает только извне и срабатывает, только когда страница обновляется. И после того, как я ввел ajax, iframe перестал полностью растягиваться и происходит это потому, что сначала загружается iframe, а уже потом происходят запросы. Может быть есть какое-нибудь событие или есть другой способ реализовать изменение высоты фрейма? Заранее спасибо за помощь!

Answer 1

[Денис]

var d = document;

d.addEventListener('DOMContentLoaded', function(){

	var frame = d.getElementById('ifr'), // ваш iframe
	MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
	observer = new MutationObserver(function (mutations) {
		resizeIframe(frame);
    }),
	config = {
		attributes: true,
		childList: true,
		characterData: true,
		subtree: true
	};
	frame.addEventListener('load', function(){
		observer.observe(this.contentDocument.body, config);
		resizeIframe(this);	
	}, false);
	
}, false);

	
function resizeIframe(o){
	o.style.height = o.contentDocument.body.scrollHeight + 'px';	
}

Только надо учитывать, что MutationObserver не поддерживается в ослах ниже 11-ой версии.

Comments

[exitialis]

Просто как боженька решил все