• Home
  • About
  • Resume

Resize IFRAME after content has been resized

By , 09/30/2009 3:15 PM

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.

The solution: attach another event handler for content resize event. And we should do it when content already loaded, in other words inside handler for “onload” event:

// 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() {
   //addding event handler that will run when iframe content resized
   $addHandler(this.contentWindow, "resize", iframeContentResized);
}

//fires when IFRAME content is resized
function iframeContentResized() {
   this.frameElement = this.document.body.offsetHeight+'px'
}

In this case “onload” event fires when IFRAME content is loaded and its handler “iframeContentLoaded” in turn attaches hander for contentWindow’s “onresize” event. And when that handler runs – it resizes the iframe.

12 Responses to “Resize IFRAME after content has been resized”

  1. boycuoi says:

    Is this function can resize iframe when page content resize ?

  2. Yuriy says:

    @boycuoi, this implementation listens to resizing of page within the IFRAME, if you need to react to resizing of main “host” window you will need to catch that event as well.

  3. boycuoi says:

    Can u send me this source page ?

  4. Yuriy says:

    @boycuoi, unfortunately this is a part of a bigger project so the page would be to complex for just this example. But you can copy these functions and incorporate them into your page. Let me know if you have any questions about implementation.

  5. jdelasko says:

    Can you post an example page code that includes an actual iframe. It’s not clear how to use this with the iframe tag.

  6. Yuriy says:

    @jdelasko , should be pretty straightforward. If you have in HTML Markup something like:

    <IFRAME id=”xMyIframe”><IFRAME>

    then in your JavaScript get a reference to the IFRAME object:

    var oIframe = $get(“xMyIframe”)

    then use code block from the post above to assign event handlers. After that if in your JavaScript code you assign IFRAME source, e.g.

    oIframe.src = “http://my.url.com”

    those events will kick in on load and resize.

  7. Bags says:

    Thanks for the tip. Tried it out and works like a charm in IE8. But it does not work in IE6

    any ideas ?

  8. Yuriy says:

    @Bags
    Move to IE8 🙂 Just kidding, I know how corporate environments are stuck with IE6. What is happening exactly – do you get an error message or nothing at all? Can you put breakpoints inside of both functions to see what the values are?

  9. Jacob says:

    Thanks for this code. but where would you put the code ,in the content file og ind the file where the iframe is ?

    i tryed it out in the iframe file, and here it seems to load before the content is loaded. and the size is wrong.

  10. Yuriy says:

    @Jacob, the code has to be placed in the page that hosts the IFRAME page, not into IFRAME page itself.

  11. David says:

    This doesnt work. You are setting an event bound to when the IFRAME’s size changes, not the content inside of it. In other words, fail.

  12. Yuriy says:

    @David Um, yes it works. And if you look closer – resize event is bound to content window, not IFRAME itself. In other words – win 🙂

Leave a Reply

Panorama Theme by Themocracy