Document (8)
Events (8)
ExtJS (9)
Strings (3)
Exchange Links
About this site
Adjusting the height of an IFRAME according to its content
9 comments. Current rating: 
(2 votes). Leave comments and/ or rate it.
Question:
On my page I display search results in an IFRAME. Sometimes there's only 5 rows of data, sometimes it can be 2000. I need to have the IFRAME size adjust to the number of elements. I was working with a construct likeiframe_1.height = 30 + 16 * (number_of_rows)
but this estimating formula relies on a certain font size. And it looks really wrong in Netscape or Opera.
Answer:
Why estimate if you can make an exact calculation of the document height? Take the code below which will work on Internet Explorer and various Netscape versions. |  | |
<script type="text/javascript"> function adjustIFrameSize (iframeWindow) { if (iframeWindow.document.height) { var iframeElement = parent.document.getElementById(iframeWindow.name); iframeElement.style.height = iframeWindow.document.height + 'px'; iframeElement.style.width = iframeWindow.document.width + 'px'; } else if (document.all) { var iframeElement = parent.document.all[iframeWindow.name]; if (iframeWindow.document.compatMode && iframeWindow.document.compatMode != 'BackCompat') { iframeElement.style.height = iframeWindow.document.documentElement.scrollHeight + 5 + 'px'; iframeElement.style.width = iframeWindow.document.documentElement.scrollWidth + 5 + 'px'; } else { iframeElement.style.height = iframeWindow.document.body.scrollHeight + 5 + 'px'; iframeElement.style.width = iframeWindow.document.body.scrollWidth + 5 + 'px'; } } } </script> | ||
 |  |
|
||||||||
Comments:
| ||
|
I assume we paste this code into the head of our html document, and it will automatically apply to all iframes?
Thanks | ||
| ||
|
Does this work for external pages (from different website) as well? Maybe I'm doing something wrong here...
Thanks, Konrad | ||
| ||
|
No exactly where i am looking for
Thanks anyway | ||
| ||
|
Works perfectly for my situation - thank you
| ||
| ||
|
Heres another article on javascript iframe reszing
 http://www.colingod..avascript/ | ||
| ||
|
From where should be called this adjustIFrameSize() method? From the <body onload=... />? Another question is about iframeWindow.document.documentElement.scrollHeight + 5 + 'px'; How was infered this value of 5 in the above code? Thank you | ||
| ||
|
Should I paste that code onto the page that has the iFrame, or the page that is going to be INSIDE the iframe? You didn't make it quite clear about where to put the code...
| ||
| ||
|
I put your script into the main page (the one with the iframe) and i set the body tags like this: <body onload='adjustIFrameSize(the_id_Of_My_Iframe)'>
It's working for the first page but not for the other page loaded with the menu. | ||
| ||
|
Is this also possible to do this with something like an php include with an div or something...
I would really apreciate some help on this matter, I'm planning on implanting this script into another script so that I can finally get rid of those scrollbars. |
