944,117 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Dynamic iFrame height, not working in ie without refresh.
Ad:
Permalink
Mar 3rd, 2007
0

Dynamic iFrame height, not working in ie without refresh.

Expand Post »
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:

<script type="text/javascript">
function adjustIFrameSize(iframe)
{
if ( iframe.contentDocument ) // firefox
{
iframe.height = iframe.contentDocument.height;
}
else // IE
{
iframe.style.height =
iframe.contentWindow.document.body.scrollHeight;
}

}


</script>
The iframes:

<iframe src="centriaMenu.php" name="menu" WIDTH="800" HEIGHT="200"
hspace="0" frameborder="0" marginheight="0" marginwidth="0"></IFRAME>

<iframe src="<?php print $_POST[fileName]?>" name="contents"
onload="adjustIFrameSize(this);" id="contents" height="200"
WIDTH="800" frameborder="0" marginheight="0" marginwidth="0" ></
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Saion is offline Offline
1 posts
since Mar 2007
Permalink
Mar 11th, 2007
0

Re: Dynamic iFrame height, not working in ie without refresh.

I got exactly same problem today. IE sucks.

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

html
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <iframe id="myframe">
  2. <div id="content">
  3. </div>
  4. </iframe>

Javascript
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. height = document.getElementById("content").offsetHeight;
  2. document.getElementById("myframe").height = height;

Let me know if this works or not
Reputation Points: 10
Solved Threads: 0
Newbie Poster
swamp_safari is offline Offline
1 posts
since Mar 2007
Permalink
Oct 24th, 2007
0

Re: Dynamic iFrame height, not working in ie without refresh.

Thanks a lot for both of you!!! I had the same problem but It's now working!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
h_aboulela is offline Offline
1 posts
since Oct 2007
Permalink
Nov 14th, 2007
0

Re: Dynamic iFrame height, not working in ie without refresh.

Click to Expand / Collapse  Quote originally posted by swamp_safari ...
I got exactly same problem today. IE sucks.

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

html
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <iframe id="myframe">
  2. <div id="content">
  3. </div>
  4. </iframe>

Javascript
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. height = document.getElementById("content").offsetHeight;
  2. 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?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
CoolCow is offline Offline
1 posts
since Nov 2007
Permalink
Nov 15th, 2007
0

Re: Dynamic iFrame height, not working in ie without refresh.

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Apr 11th, 2010
0
Re: Dynamic iFrame height, not working in ie without refresh.
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ckuper is offline Offline
1 posts
since Apr 2010
Permalink
Oct 29th, 2010
0

Finally the answer!

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!
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jewelsjacobs is offline Offline
1 posts
since Oct 2010
Permalink
Nov 1st, 2010
0
Re: Dynamic iFrame height, not working in ie without refresh.
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 Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function load_it(url) {
  5.     document.getElementById("load_frame").src = url;
  6. }
  7.  
  8. function adjust_iframe(h) {
  9.     if(h==0)
  10.     document.getElementById("load_frame").src = document.getElementById("load_frame").src;
  11.     document.getElementById("load_frma").style.height = h;
  12.     window.scrollTo(0,0);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. Auto height Div<a onclick="load_it('flashpage.htm')">load page</a>
  18. <iframe id="load_frame" marginheight="0" marginwidth="0" border="0" src="" frameborder="0" width="100%" name="load_frame" scrolling="no">
  19. </body>
  20. </html>

for the page being loaded in the iframe. We will call it flashpage.htm. Just put this in the head section.
JAVASCRIPT Syntax (Toggle Plain Text)
  1. <script type="text/javscript">
  2. funtion load_page() {
  3.     parent.adjust_iframe(document.body.scrollHeight);
  4. }
  5. </script>
  6. <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.
Reputation Points: 13
Solved Threads: 39
Posting Whiz in Training
fobos is offline Offline
212 posts
since Feb 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Height of a div
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Need help creating WP custom metabox with add text input button..





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC