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.
Is this function can resize iframe when page content resize ?
@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.
Can u send me this source page ?
@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.
Can you post an example page code that includes an actual iframe. It’s not clear how to use this with the iframe tag.
@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.
Thanks for the tip. Tried it out and works like a charm in IE8. But it does not work in IE6
any ideas ?
@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?
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.
@Jacob, the code has to be placed in the page that hosts the IFRAME page, not into IFRAME page itself.
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.
@David Um, yes it works. And if you look closer – resize event is bound to content window, not IFRAME itself. In other words – win 🙂