javascript - 判断 iframe 是否已经加载

Question

我试图计算出 iframe 内容的大小，以便调整 iframe 元素的大小以包含其内容。

如何确定 iFrame 是否已加载以及我是否可以可靠地测量它的内容尺寸。

注意:onload 事件不会执行，因为 iframe 可以在 onload 绑定(bind)时加载。另外，我想要一个普通的 JS 解决方案而不是 jQuery。

Answer 1

你可以试试这个:

1- iframe 应该有一个 ID:

<iframe    
  id="slideshow_frame"    
  src="frame.html"   
  frameborder="0"    
  width="100%"    
  marginheight="0"    
  marginwidth="0"
  scrolling="no">
 </iframe>

2- 加载到 iframe 的页面应包含所有 html 到一个“易于检索”的容器中(带有 ID 的 div 是完美的!):

<div id="content">
    <div style="background: red; width: 400px; height: 120px"></div>
    <div style="background: green; width: 400px; height: 300px"></div>
    <div style="background: yellow; width: 400px; height: 60px"></div>
</div>

3- 您可以在任何地方触发此功能:

function resizeIframe(iframeID) {       
   var iframe = window.parent.document.getElementById(iframeID);
   var container = document.getElementById('content');
   iframe.style.height = container.offsetHeight + 'px';            
}

来源:

Adapting iframe height to its content with 2 lines of javascript