确定是否已加载iframe

Question

I'm trying to figure out the size of an iframe's content so I can resize the iframe element to compass its content.

How do I find out if the iFrame has been loaded and I can reliably measure it's content dimensions.

Note: onload event won't do because the iframe can be loaded by the time onload is bound. Also, I'd like a vanilla JS solution not jQuery.

Answer 1

You could try this:

1- The iframe should have an ID:

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

2- The page loaded into the iframe should contain all the html into an “easy retrievable” container (a div with an ID is perfect!):

 <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- You can trigger this function wherever you want:

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

Source:

Adapting iframe height to its content with 2 lines of javascript