Question

我正在尝试计算iframe内容的大小，以便我可以调整iframe元素的大小来指导其内容。

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

注意：onload事件不会发生，因为iframe可以在onload被绑定的时间加载。另外，我想要一个不是jQuery的vanilla JS解决方案。

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

确定iframe是否已加载

1 个答案: