Обнаружить изменение высоты содержимого iframe

Question

Есть множество примеров, показывающих, как динамически установить высоту iframe для ее содержимого. Это прекрасно работает для меня. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что контент может изменять размер, не вызывая onload (думаю, скрытый / расширяемый div с).

Есть ли способ определить, когда изменился размер содержимого iframe? Это на том же домене и не jQuery, пожалуйста.

Answer 1

Я бы делал это регулярно (возможно, каждые 200 миллисекунд, возможно, чаще), используя setInterval. Затем вы можете сравнить размер содержимого с тем, что было в прошлый раз.

var iframe = document.getElementById('myIframe'),
    lastheight;

setInterval(function(){
    if (iframe.document.body.scrollheight != lastheight) {
        // adjust the iframe's size

        lastheight = iframe.document.body.scrollheight;
    }
}, 200);

Answer 2

Для браузеров, не относящихся к webkit, существует несколько domMutation-Events, которые запускаются при изменении атрибута элемента (например, элемента body). См. DOMSubtreeModified и, что более важно, DOMAttrModified.

Интернет-обозреватель запускает событие onresize даже для элементов, отличных от Windows.

Опера чтит события domMutation.

Webkit, с другой стороны, отверг эти события как компромисс для скорости рендеринга и производительности javascript. У тебя нет другого способа, кроме как проверить через тайм-аут / интервал эффективный размер элемента.