There’re many articles out there describing how to resize IFRAME to fit its content height to avoid nasty scrollbars. They correctly suggest to catch “onload” event which fires when content has been loaded and set IFRAME’s height to content height. Here is code example (I am using Microsoft AJAX to attach handler for “onload” event, but you can use any method you like):

// oIframe object contains reference to the IFRAME element
// adding event handler that will run when iframe content is loaded
$addHandler(oIframe, "load", iframeContentLoaded);

//this event fires when IFRAME content is loaded
function iframeContentLoaded() {
   this.style.height = this.contentWindow.document.body.offsetHeight+'px'
}

This approach works if content stays static after loading from the server. But in many cases client-side JavaScript kicks to resize content or some user interaction changes content height. Since the page already loaded, simple “onload” doesn’t work.
Continue reading →