有很多例子展示了如何动态地设置iframe的高度。这对我来说非常好用。我现在遇到的问题是内容可以在不触发onload的情况下改变大小(想想隐藏/可扩展的div)。当iframe内容的大小发生变化时,有什么方法可以检测到吗?这是在同一个域上,请不要使用jQuery。
iframe
onload
div
cdmah0mi1#
我会通过使用setInterval定期轮询(可能每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);
uttx8gqw2#
对于非webkit浏览器,有一些domMutation-Events,当元素的属性(例如body元素)改变时触发。参见DOMSubtreeModified和更重要的DOMAttrModified。internet explorer即使在非windows元素上也会触发onresize事件。Opera尊重domMutation事件。另一方面,Webkit放弃了这些事件,这是对渲染速度和JavaScript性能的一种妥协。除了通过超时/间隔检查元素的有效大小之外,没有其他方法。
vnzz0bqm3#
ResizeObserver为我工作:
const iframe = document.getElementById('myIframe') const observer = new ResizeObserver(() => { setHeight(iframe.document.body.scrollHeight); }) observer.observe(iframe.document.body);
3条答案
按热度按时间cdmah0mi1#
我会通过使用
setInterval
定期轮询(可能每200毫秒一次,也可能更频繁),然后将内容的大小与上次的大小进行比较。uttx8gqw2#
对于非webkit浏览器,有一些domMutation-Events,当元素的属性(例如body元素)改变时触发。参见DOMSubtreeModified和更重要的DOMAttrModified。
internet explorer即使在非windows元素上也会触发onresize事件。
Opera尊重domMutation事件。
另一方面,Webkit放弃了这些事件,这是对渲染速度和JavaScript性能的一种妥协。除了通过超时/间隔检查元素的有效大小之外,没有其他方法。
vnzz0bqm3#
ResizeObserver为我工作: