JavaScript: adjust the height of an iframe according to its content

Tweet

I know that we shouldn't use iframes, but sometimes they are useful or maybe we used them in old pages that we don't really want to completely update for iframes removal. In those cases we might need to make the iframes expand and reduce according to the content. Yet, we don't want to write much code to achieve that. That is the case when JavaScript can lend us an helping hand.

offsetHeight and scrollHeight

In order to reach our goal, we need to use different code: one for Firefox and one for all other browsers. Firefox needs to use offsetHeight which is "a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height." (quoted from MDN). For other browsers we will use scrollHeight which is "a measurement of the height of an element's content including content not visible on the screen due to overflow." (quoted from MDN).

The iframe

First of all, we need to insert an iframe. The following code is just an example:

<iframe src="defaultIframe.asp" name="example" width="100%" scrolling="no" frameborder="0" id="example" allowtransparency="true" onload="calcHeight();" >An
          iframe capable browser is required to view this web site.</iframe>

We need to eventually customize some part of the above code. In particular, we need to change the src with a proper default page to be loaded inside the iframe, and - if needed - change some properties like width, frameborder, allowtransparency and scrolling. What is really important is the ID of the iframe ("example") because our JavaScript snippet will work with getElementById.
The onload event will call a function (calcHeight()) which will do the dirty job.

JavaScript

Insert the following code in the head of your page:

function calcHeight()
{
    var the_height=0;
    //find the height of the internal page
    if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
        the_height=document.getElementById('example').contentDocument.body.offsetHeight+40;
    }
    else
    {
        the_height=document.getElementById('example').contentWindow.document.body.scrollHeight+16;
    }
document.getElementById('example').height=the_height+"px";
}

As said before, the above is the calcHeight() function called on the onload event of our iframe. It basically calculates the height of the internal page (the page inside the iframe) according to the target browser.
It tests for Firefox and uses offsetHeight, else it uses scrollHeight. As you can see it adds some pixels: 40 for Firefox and 16 for other browsers. That is because it seems that Firefox needs more space. We might need to test and change those numbers according to our needs. In my experience those extra spaces are ok in most cases.
Finally, in the last line, the code sets the new height for our iframe (adding a "px" string).

And that is all. I hope you find the above trick useful.