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

Flex 4 (Gumbo) beta released!

Flex 4 beta (codename: Gumbo) has been released, I just finished to read about the new major release. These are the main news:

  1. Improved compiler performance
  2. New skinning and component architecture (named Spark)
  3. Added suppurt to FXG (learn more about FXG)
  4. New states model
  5. ASDoc tool has been improved and is now possible to use ASDoc tags in mxml documents
  6. CSS has been improved to support descendant and id selectors (finally the previous missing “cascading part” of CSS has been provided!)
  7. Backwards compatibility with Flex 3

The new sdk is available on Adobe Labs

More about Gumbo here:

An Introduction to the Gumbo Component Architecture (by Deepa Subramaniam)
What’s new in Flex 4 SDK beta (by Matt Chotin)
Differences between Flex 3 and Flex 4 (by Joan Lafferty)