Adapting iframe height to its content with 2 lines of javascript

In a project, I have to use an iframe and I need that its height is automatically calculated based on its content. However is not possible to accomplish this by simply setting the attribute height to 100%, instead we must smartly use javascript to dynamically assign that value after a computation. The solution I’m going to show you is not 100% my work but instead an optimization and a better implementation of clever intuitions I found on the web.
The “trick” works in this way:

1. The iframe should has an ID assigned:

<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 contains 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. on the iframe’s page “onload” event, a function will be executed to adjust its height:

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

14 thoughts on “Adapting iframe height to its content with 2 lines of javascript

  1. Charles

    I am at a loss as to why this is not working. Please advise!

    I have inserted all the data as you have stated, yet still am having no luck in regards to having the iframe extend to 100% of the height of the page being iframed into the site.

    Here is my code:

    And at the top of the page before the tag I input this:

    function resizeIframe(iframeID) {

    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById(“content”);

    iframe.style.height = container.offsetHeight + “px”;

    }
    //–>

    Thanks for the help-
    Charles

  2. Max


    Charles:

    I am at a loss as to why this is not working. Please advise!
    I have inserted all the data as you have stated, yet still am having no luck in regards to having the iframe extend to 100% of the height of the page being iframed into the site.
    Here is my code:
    And at the top of the page before the tag I input this:
    function resizeIframe(iframeID) {
    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById(“content”);
    iframe.style.height = container.offsetHeight + “px”;
    }
    //–>
    Thanks for the help-
    Charles

    You might need the javascript tags to wrap this code.

  3. Neeraj Surana

    Once the iFrame is loaded is it possible to change the size later based on it’s content? I need it because the content changes dynamically.

  4. Carl

    Cheers man!! This works like a bomb! Even works if you set the outer container heights as percentages which is good for responsiveness!

Leave a Reply