DelphiFAQ Home Search:

Adjusting the height of an IFRAME according to its content

 

comments18 comments. Current rating: 4 stars (3 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 like
iframe_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>

Content-type: text/html

Comments:

You are on page 1 of 2, other pages: [1] 2
2006-03-03, 15:14:43
anonymous from United States  
I assume we paste this code into the head of our html document, and it will automatically apply to all iframes?

Thanks
2006-08-09, 10:14:52
anonymous from United Kingdom  
Does this work for external pages (from different website) as well? Maybe I'm doing something wrong here...

Thanks,

Konrad
2007-12-18, 02:37:45
anonymous from Spain  
No exactly where i am looking for

Thanks anyway
2008-04-04, 06:36:23
anonymous from Rochester, United States  
rating
Works perfectly for my situation - thank you
2008-04-09, 09:52:11   (updated: 2008-04-09, 09:52:50)
anonymous from United States  
Heres another article on javascript iframe reszing
http://www.colingod..avascript/
2008-05-27, 01:55:28
sorin from Bucuresti, Romania  

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
2008-06-15, 16:35:12
anonymous from Canada  
rating
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...
2009-03-05, 11:52:18   (updated: 2009-03-05, 11:53:04)
anonymous from Canada  
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.
2010-01-14, 15:14:40
[hidden] from Netherlands  
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.
2010-04-30, 13:55:29   (updated: 2010-04-30, 14:13:51)
simple from United States  
a way simplerrrr way

Add this to your js file

function setFrameHeight(frameId) {
parent.document.getElementById(frameId).height = document['body'].offsetHeight;
}


then add this inside your framed page be fore the closing body tag

<script type='text/javascript'>
setFrameHeight(theFrameId) ;
</script>

2010-05-11, 03:08:43
anonymous from United States  
the code works for my iframe, but it extends the iframe to the height of the window instead of the height of the content in the iframe.
this is my site: http://oleanderdesign.co.nr
check it out and you'll see the problem.
2012-01-06, 04:13:34
anonymous from Cambodia  
rating
.. asdfdf
2012-06-30, 01:53:07
anonymous from China  
2012-06-30, 01:54:23
anonymous from China  
2012-06-30, 01:55:32
anonymous from China  
You are on page 1 of 2, other pages: [1] 2

 

 

NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.
 

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: