iFrame Auto Resize

I need to be able to have the height of an iFrame autoresize.

[spikeengineer]

I need to be able to have the height of an iFrame autoresize in Mozilla / Netscape. Also, what I have currently gives me errors some times in Internet Explorer.

I have included the following code to attempt to do the above...

<style>
iframe {height:expression(frames("gotime").document.body.scrollHeight + 25);
}
</style>

Any help would be appreciated.

[ricfink]

About a month ago I was faced with the same need (to conditionally resize an iframe) and discovered that it just wouldn't work reliably due to browser quirks.
However, I solved the problem by creating a div in the parent page that got replaced with the innerHTML from the body of the document in the iframe. Worked like a charm.
You can use an onload event in the iframe element in the parent page or an onload event in the body of the document in the iframed page to trigger the exchange.

[edited by: tedster at 4:37 pm (utc) on April 25, 2004]

[spikeengineer]

Sorry...I'm a beginner at this--how would you go about implementing that solution?

[spikeengineer]

I'll provide some more information:

I have a toolbar which I want to dynamically update the content of the page in an iFrame. My dilemma is that I can't dynamically resize the iFrame to the length of the displayed file in Mozilla using:

<STYLE>
iframe {height:expression(frames("gotime").document.body.scrollHeight + 25);}
</STYLE>

The iFrame is contained within a CSS, and the iFrame also contains a CSS.

Although this works fine in iexplore, is there a way to do this in multiple browsers?

[ricfink]

Post a stripped down version of the page if you can. One that shows exactly how the iframe fits into the structure of the page.

The solution I settled on works like this:
The parent page has a javascript function like this:

function insertIt() {
var _y = document.getElementById('framediv');
var _x = window.frames[0].document.body.innerHTML;
_y.innerHTML = _x
}
Then, the parent page has a div with the id "framediv" which is placed where the contents of the iframe should appear on the page.
The iframe element is then placed inside the div, like this:

<div id="framediv">
<iframe onload="insertIt();" src="/somewhere/content.htm" frameborder="no" width="555px" scrolling="no">
</div>

As you can see, there's onload="insertIt()" inside the iframe element. So when the iframe loads, the parent page immediately takes the contents of the body of the document contained in the iframe and actually replaces the iframe element with that content.

It's a little tricky to comprehend, but it works great.

You said you're a newbie, does this make any sense to you?

also, is the iframe document located on the same server and the same domain as the parent page?
That will play a part.

[spikeengineer]

Thanks! It loads very nicely now when the page is opened.

How can I get it to load properly when I click a link on the toolbar?