javascript 检测iframe内容高度更改

m4pnthwp  于 2022-11-27  发布在  Java
关注(0)|答案(3)|浏览(218)

很多例子展示了如何动态地设置iframe的高度。这对我来说非常好用。我现在遇到的问题是内容可以在不触发onload的情况下改变大小(想想隐藏/可扩展的div)。
iframe内容的大小发生变化时,有什么方法可以检测到吗?这是在同一个域上,请不要使用jQuery。

cdmah0mi

cdmah0mi1#

我会通过使用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);
uttx8gqw

uttx8gqw2#

对于非webkit浏览器,有一些domMutation-Events,当元素的属性(例如body元素)改变时触发。参见DOMSubtreeModified和更重要的DOMAttrModified。
internet explorer即使在非windows元素上也会触发onresize事件。
Opera尊重domMutation事件。
另一方面,Webkit放弃了这些事件,这是对渲染速度和JavaScript性能的一种妥协。除了通过超时/间隔检查元素的有效大小之外,没有其他方法。

vnzz0bqm

vnzz0bqm3#

ResizeObserver为我工作:

const iframe = document.getElementById('myIframe')
    
    const observer = new ResizeObserver(() => {
        setHeight(iframe.document.body.scrollHeight);
    })
    
    observer.observe(iframe.document.body);

相关问题