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:


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>

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'); = container.offsetHeight + 'px';			

View the generated source code in internet explorer with a bookmarklet

internet explorer sucksAs all knows, in browser like Firefox, in order to view the generated source code of a page (that is the final HTML which the browser display into the window, so it includes JS generated nodes and SSI inclusions) we have simply to select all (ctr+A or command+A on a Mac) and choose “View selection source”. Internet Explorer instead doesn’t offers the ability to view the generated source but only the basic HTML code (whic doesn’t include dynamic generated content). To have such feature, I’ve used the innerHTML property to get the final content of <html> tag, and I’ve realized a bookmarklet to call after the loading of the page. The bookmarklet opens an 800×600 resizable popup with a textarea that shows the HTML code.

This is the code of the bookmarklet:
to use it, simply copy and paste into the ie address bar and press enter ;-)