View Full Version : dynamically resize iframe

08-08-2004, 02:19 PM
Any javascript experts here?

I am trying to dynamically change the height and width of an iframe depending on the content in the iframe.

I have the following code so far:

function calcHeight()
var the_height=document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;//find the height of the internal page
var the_width=document.getElementById('the_iframe').contentWindow.document.body.scrollWidth;//find the width of the internal page
document.getElementById('the_iframe').style.height=the_height;//change the height of the iframe
document.getElementById('the_iframe').style.width=the_width;//change the width of the iframe

//this bit is html for the iframe
<iframe onLoad="calcHeight();" id="the_iframe" name="myframe" scrolling="no" frameborder="0" src="blank.html" height="100%" width="100%"></iframe>

This code does work, but not perfectly.

It works perfectly only if the height of the iframe changes based on the content in the iframe. If the content increases with height of the iframe, it works perfectly. If I then click on another link which only has a little information, the iframe reduces its size to fit around the content. Thats exactly what its supposed to do.

On to the bit which is not working.

If i click on a link which has content wider than the width of the screen, the iframe will resize itself to fit around the content. Thats a good thing as thats whats supposed to happen.

However, if I then click on a link which has content less than the previous content, the iframe height will reduce to fit around the content, but the iframe width will not reduce for some reason? It will stay at the width of the previous content ???

anyone know how to fix this problem?

excuse my back english :)

04-08-2005, 10:14 AM
I solved this bug(?) by add the following code before get the Iframe's contentWindow.document.body's scrollWidth value. :thumbsup:
document.getElementById('Iframe').style.width=document.body.clientWidth; //fix the scrollWidth bug;寬度可變大但不可變小
var the_wide=document.getElementById('Iframe').contentWindow.document.body.scrollWidth;