I just asked a question about why a certain js code won't work in Chrome and Safari 100%, but after more troubleshooting I think I have found out that this is the question I should be posting.
I have a page which has a form in it. This form's target is an iframe on the same page.
The iframe is dynamic, and php based.
This is the bottom of my php iframe content:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
<?php echo $display_table; ?>
As you see, I call a function to resize the iframe's height in the main page (parent page).
This works fine, and it does in fact get resized, BUT, in Chrome and Safari the resize is setting a height "higher" than it should be. So if the height is 500px then Chrome and Safari sets it to around 2000px, which is the maximum of the iframe document height.
Why is this? One thought might be that the body isn't fully loaded before the scrollHeight is being sent to the resize function maybe?
Is there any way of making it wait until the document is fully loaded?
One thing that confuses me is that when I click a link on the main page, and then hit back, the page resize works good, and is set to 500px as it should be even in Chrome/Safari. But that's when I hit "back" in the browser.
Hmmm, I really don't understand this, so please help me out here.
Thanks
document.body.scrollHeight will always return one of two values in chrome:
if the document content is longer then the height of the window, then the height of the content is returned
if the document is shorter then the height of the window, then the height of the window is returned.
It sounds alot like you have a height set on the iframe. When the content in the iframe loads, it will treat the iframe as the window. So, if the iframe's height is set to 2000 and your content's height is only 500, chrome will return an offsetheight of 2000.
If this is the case, the simplest thing to do is set the height of the iframe to 1px. (or auto)
Another option (as pointy um..points out) is that you could create a wrapper div right after the body that contains all of your content. You can then just get the height of that div and return that to your parent function
Regarding this question:
Is there any way of making it wait
until the document is fully loaded?
The answer is yes, and your already doing it. Since your calling parent.resize_iframe on onload, the function will not get called till all of the HTML, JS, CSS and images are loaded on the screen. However it should be pointed out there are a few draw backs to using the body tags onload function. One, is it has to load all the images before it calls onload. Secondly, if someone rebinds to window.onload your function will never get called. If your interested in learning more about onload and ways to deal with it, check this link out http://www.webreference.com/programming/javascript/onloads/
