Jun 12 2009

Adapting iframe height to its content with 2 lines of javascript

Category: javascript — Davide Zanotti @ 2:38 am

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:

1
<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!):

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
function resizeIframe(iframeID) {
       
    var iframe = window.parent.document.getElementById(iframeID);
    var container = document.getElementById("content");

    iframe.style.height = container.offsetHeight + "px";
           
}

Tags: ,

6 Responses to “Adapting iframe height to its content with 2 lines of javascript”

  1. Charles says:
    October 15th, 2009 10:10 am

    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. Charles says:
    October 15th, 2009 10:12 am

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

  3. Davide Zanotti says:
    October 16th, 2009 12:49 am

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

  4. Max says:
    June 8th, 2010 3:39 pm


    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.

  5. Brian says:
    May 15th, 2011 2:42 pm

    Do you have a way to do this without javascript?

  6. Davide Zanotti says:
    May 16th, 2011 12:14 am

    Is not possible without js

Leave a Reply