2

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.

Gezim
  • 7,112
  • 10
  • 62
  • 98

1 Answers1

0

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

benjamingranados
  • 438
  • 5
  • 15
  • 2
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – pomeh Sep 09 '14 at 07:42