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';			
} 
  • 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

  • Charles

    Opps….it cut out my code. Here is the code:

  • http://www.daveoncode.com Davide Zanotti

    You can’t write code directly in the messages, give me a link to your test instead ;-)

  • 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.

  • http://www.reunitemysite.com Brian

    Do you have a way to do this without javascript?

  • http://www.daveoncode.com Davide Zanotti

    Is not possible without js

  • Davin

    This only works if you own both pages and can edit the page being framed.

  • http://www.daveoncode.com Davide Zanotti

    You are right Davin ;)

  • dhanam

    Its work fine….

  • siva

    we will not able to see the contents in the horizondal part

  • http://www.lakdhajaconstruction.com krishantha

    How we extend the height of the frameset in html

    eg:-

  • 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.

  • http://www.LIMSCHINESE.com limschinese

    the box shows up too small

    here is the code can anyone make the iframe larger>?

  • http://gravatar.com/pausebreakmedia Carl

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

  • http://gravatar.com/carvaper Carlos

    Hi,
    I´m creating my website with Jimdo (from this you can guess I´m not a experienced programmer).
    I need to insert a iframe in one page and I need to adapt the heigh. I´ve tried to use this code, but I´m getting lost. Could someone please help me?
    Thanks