Dynamic iFrame height, not working in ie without refresh.

When i try to dynamically change the height of an iframe in ie through
a java-script to match its content (a html page containing a flash
movie), it doesn't resize the iframe at first, but when i reload the
same page into the iFrame it resizes as planned, how come? Any ideas?
This script works well in firefox, safari and netscape, but i cant get
it to work in ie(8, 7). And i get the same problems with every
resizing script i've tried.

This is the script i use:

The iframes:

IFRAME>

I have a flash menu in the first iframe, the buttons on the menu uses
getURL(siteToLoad, "contents") to load another html-page into the
iframe "contents".

Is it possible to make the iFrame refresh automatically though
javascript so that i just refreshes the iframe once? Everytime ive
tried that it just ends up in a never ending refresh-loop... How can i
make this work? Is there any better script for resizing (and
refreshing after resize) the iframe height so that it matches to its
content? Please, i've been stuck with this problem for some days
now...

// Max

Saion

Newbie Poster

1 post since Mar 2007

Reputation Points: 10

Solved Threads: 0

5 Years Ago

I got exactly same problem today. IE sucks.

Here is my solution. This works for both IE and firefox.

html

<iframe id="myframe">
<div id="content">
</div>
</iframe>

Javascript

height = document.getElementById("content").offsetHeight;
document.getElementById("myframe").height = height;

Let me know if this works or not

swamp_safari

Newbie Poster

1 post since Mar 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

Thanks a lot for both of you!!! I had the same problem but It's now working! :)

h_aboulela

Newbie Poster

1 post since Oct 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

I got exactly same problem today. IE sucks. Here is my solution. This works for both IE and firefox. html
<iframe id="myframe">
<div id="content">
</div>
</iframe>
Javascript
height = document.getElementById("content").offsetHeight;
document.getElementById("myframe").height = height;
Let me know if this works or not

Used your trick but it dousn't seem to work (using IE 7)
It looks like document.getElementById("content") returns NULL, so there's no reference to the object. probably because it's inside the iframe tags and that's only shown when the browser dousn't support frames.
Can you help me figure out how to get this to work?

CoolCow

Newbie Poster

1 post since Nov 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

You opened the "height" can of worms, and now the only way to recan them is to get a bigger can.

First of all, whether the getElementById gets the correct value depends on how that value got there.

- The value is available if it got there through rendering of the original web page, or if it was set by the JavaScript program.

- A former value is returned if some dynamic content other than the JavaScript changed the attribute. An example is a div resizing itself to hold an object that was not loaded when the original page was rendered.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

2 Years Ago

For those who find this thread two years later: the simple answer seems to be that in IE, the BODY element offsetHeight gets forced to the height of the iframe or its default height. So you can never get the height it would have been outside the iframe. But if you use the height of an element within BODY, maibe the first tag such as a table or div, that works as expected on both Firefox and IE using offsetHeight because those elements retain their height value.

ckuper

Newbie Poster

1 post since Apr 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

ckuper,

You saved my life with your comment about using an element within the body for IE compatible dynamic resizing frames.

I spent waaayyyy to long trying to come up with a solution and yours was the missing piece of the puzzle I couldn't find anywhere.

:) Thank you thank you thank you! :)

jewelsjacobs

Newbie Poster

1 post since Oct 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

I know this works in IE, because i use it all the time. Here is my code.
Page1 is the main page with the iframe on it. The iframe ID will be "load_frame".

Page1

<html>
<head>
<script type="text/javascript">
function load_it(url) {
    document.getElementById("load_frame").src = url;
}

function adjust_iframe(h) {
    if(h==0)
    document.getElementById("load_frame").src = document.getElementById("load_frame").src;
    document.getElementById("load_frma").style.height = h;
    window.scrollTo(0,0);
}
</script>
</head>
<body>
Auto height Div<a onclick="load_it('flashpage.htm')">load page</a>
<iframe id="load_frame" marginheight="0" marginwidth="0" border="0" src="" frameborder="0" width="100%" name="load_frame" scrolling="no">
</body>
</html>

for the page being loaded in the iframe. We will call it flashpage.htm. Just put this in the head section.

<script type="text/javscript">
funtion load_page() {
    parent.adjust_iframe(document.body.scrollHeight);
}
</script>
<body onload="load_page()">

This way when you click on the link, it will load the page into the iframe and the page getting loaded will call the function "load_page" and will call the function on the main page to set the iframe height to the body height on the page being loaded. The only downfall is, if you have set the flash to 100% for height and width then you will have to manually set the iframe height. Other than that, this will work.

fobos

Posting Whiz in Training

297 posts since Feb 2009

Reputation Points: 29

Solved Threads: 52

This article has been dead for over three months

You