检测iframe内容高度变化

Question

有大量示例显示了如何动态设置iframe的内容高度。这对我来说很完美。我现在遇到的问题是内容可以在不触发onload的情况下改变大小（想想隐藏/可扩展div）。

有没有办法检测iframe内容的大小何时发生变化？这是在同一个域上，请不要使用jQuery。

Answer 1

我会通过使用setInterval定期轮询（可能每200毫秒，可能更频繁）来做到这一点。然后，您可以将内容的大小与上次的大小进行比较。

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。

即使在非Windows元素上，Internet Explorer也会触发onresize事件。

Opera尊重domMutation事件。

另一方面，Webkit将这些事件作为对渲染速度和javascript性能的折衷而放弃了。除了通过超时/间隔检查元素的有效大小之外，别无他法。