Изменение размера iframe при изменении размера документа

Question

У меня есть веб-страница с приложением, работающим в iframe (тот же домен). Высота iframe устанавливается на нагрузку в зависимости от высоты документа iframed. Проблема в том, что размер документа iframed изменяется (путем расширения аккордеона, меню и т. Д.). При возникновении каких-либо событий, которые я могу использовать для соответствующего изменения размера элемента iframe?

Я пытался привязать событие resize к объекту окна в iframe, но поскольку размер окна не изменяется при изменении содержимого документа, событие не запускается. Что мне нужно, так это какое-то событие resize для объекта документа, но, насколько я знаю, такого нет. Есть ли другой способ обнаружить изменения в высоте документа?

Буду признателен за общее решение, так как я не знаю точно содержание iframe, но я могу включить в него общие сценарии.

Answer 1

Я нашел возможное, но не идеальное решение, и оно работает не во всех браузерах:

При связывании с DOMSubtreeModified элемента body в iframe я могу найти элемент iframe в parent или topи измените его высоту.

$('body').bind('DOMSubtreeModified', function(){
    top.document.getElementById('appFrame').height = $(document).height();
});

Вот обзор поддержки браузером для этого события: http://www.quirksmode.org/dom/events/

Answer 2

Вы пытались использовать событие scroll и прикрепить его к окну содержимого iFrame?

В противном случае я бы предпочел, чтобы вы подключались непосредственно к аккордеону, а не полагались на то, что вы можете ловить события прокрутки, которые могут или не могут произойти. Потому что прокрутка срабатывает только тогда, когда пользователь фактически прокручивает ползунок, а не когда аккордеон расширяется.

Но вы могли бы просто вызвать метод для родителя, когда пользователь раскрывает аккордеон, передавая ему новый размер аккордеона.

Answer 3

Если вы используете jQuery ui, вы можете использовать событие change и вызвать функцию

setHeight

http://jqueryui.com/demos/accordion/

function setHeight() {
    parent.document.getElementById('the-iframe-id').height = document['body'].offsetHeight;
}

Answer 4

Есть события изменения размера для окна iframe. Вы можете прослушать их (в самом iframe), а затем вызвать некоторую функцию в родительском окне, чтобы распространить новый размер и обновить размер iframe в родительском окне.