469,289 Members | 2,143 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,289 developers. It's quick & easy.

How to auto size an iframe?

KeredDrahcir
426 256MB
I'm trying to use an iframe to show content but the height of the content can vary and I want to try and elimate the vertical scroll bar. I know that you can have a variable height or an overflow in CSS or HTML. Is there a way I can do this using JavaScript?
Feb 15 '11 #1
15 3761
acoder
16,027 Expert Mod 8TB
You could set the height onload (within the iframe) by checking the body offsetHeight.
Feb 16 '11 #2
KeredDrahcir
426 256MB
Doesn't that just get the size of the browser window. I need to know how big the frame needs to be to fit all it's content. Is there a way to work that out?
Feb 16 '11 #3
acoder
16,027 Expert Mod 8TB
I meant within the iframe, so it'd get the iframe body height.
Feb 16 '11 #4
KeredDrahcir
426 256MB
I see what you mean. Would that go in the file that I'm inlcuding in the iframe then?
Feb 16 '11 #5
acoder
16,027 Expert Mod 8TB
Yes, that's correct.
Feb 16 '11 #6
This will take care of it. It cannot work on cross-domain content.
Expand|Select|Wrap|Line Numbers
  1. <iframe src='mypage.htm' id='if1' onload='setIframeHeight( this.id )' scrolling='no'></iframe>
  2. ......
  3. <script type='text/javascript'>
  4.  
  5. function setIframeHeight( iframeId )
  6. {
  7.  var ifDoc, ifRef = document.getElementById( iframeId );
  8.  
  9.  try
  10.  {   
  11.   ifDoc = ifRef.contentWindow.document.documentElement;  
  12.  }
  13.  catch( e )
  14.  { 
  15.   try
  16.   { 
  17.    ifDoc = ifRef.contentDocument.documentElement;  
  18.   }
  19.   catch(ee){ }  
  20.  }
  21.  
  22.  if( ifDoc )
  23.  {
  24.   ifRef.height = ifDoc.scrollHeight;  // Enable / disable
  25.   // ifRef.width = ifDoc.scrollWidth; // required lines
  26.  }
  27. }
  28.  
  29. </script>
Feb 24 '11 #7
KeredDrahcir
426 256MB
I tried getting the height and putting it in the onload but I get permission denied. Is there someway of granting permission?
Feb 28 '11 #8
acoder
16,027 Expert Mod 8TB
Is the iframe content from a different domain?

You can use server-side proxy to generate the content from your own domain.
Feb 28 '11 #9
Frinavale
9,735 Expert Mod 8TB
If you have access to the pages that you are displaying in the iFrame then you can add some JavaScript that sets a Cookie to indicate the height and width of the page's content.

That way you can retrieve the height and width properties and set the iFrame's style accordingly in the parent window.

You cannot retrieve the contents of the iFrame using JavaScript for browser security reasons.

There is another thread on the topic that I helped with a while ago found here.

-Frinny
Feb 28 '11 #10
If you have access to the pages that you are displaying in the iFrame then you can add some JavaScript that sets a Cookie to indicate the height and width of the page's content.

That way you can retrieve the height and width properties and set the iFrame's style accordingly in the parent window.
If the pages in the iframe are on the same domain then their dimensions are readable. If they are on a different domain, setting a cookie is useless since the parent page can't access it.
Mar 1 '11 #11
KeredDrahcir
426 256MB
Is there any other way of including content from one page in another page other than using an iFrame. I reason I wanted to know the height of the frame was to remove the scroll bars and make the page I'm including look like it's part of part of the parent.
BTW, I own both sites so I'm allowed to do this, they are just on different domains. Actually, is there anyway to get the dimensions if they're on the same server?
Mar 1 '11 #12
acoder
16,027 Expert Mod 8TB
To answer your 2nd question first, if they're on the same domain, it's easy. The suggested code samples should work.

If it's a different domain, you can serve it from the parent domain using a server-side proxy.

If you have control over the other domain, why can't you try setting it from within the iframe domain page?
Mar 2 '11 #13
KeredDrahcir
426 256MB
Would it make any difference if I used an object? Or do they have to have size set like with an iframe?

Is there any way to insert a page into a div that will autosize to contain it. If not, could someone give the non-IE equivilent to the object tags because I think only IE supports it.
Mar 3 '11 #14
acoder
16,027 Expert Mod 8TB
Do you mean the object tag? That should be supported by more or less all browsers.

Anyway, if you want cross-domain communication between iframes and you have control of both domains, this should be useful.
Mar 4 '11 #15
KeredDrahcir
426 256MB
I'll have a look at your link, thanks. On the subject of the browser support, I thought the object tag was supported but when I had a look at W3 Schools, it mentioned that it was only supported by IE and gave a cross for Firefox, Safari, Opera and Google Chrome.

I'll give your link a try. Thanks.
Mar 4 '11 #16

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Theodore A. Jencks | last post: by
4 posts views Thread by Microsoft | last post: by
2 posts views Thread by samuelberthelot | last post: by
7 posts views Thread by jitu78 | last post: by
1 post views Thread by Boki | last post: by
3 posts views Thread by pjames2495 | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.