How to auto size an iframe?

[KeredDrahcir]

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?

[acoder]

You could set the height onload (within the iframe) by checking the body offsetHeight.

[KeredDrahcir]

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?

[acoder]

I meant within the iframe, so it'd get the iframe body height.

[KeredDrahcir]

I see what you mean. Would that go in the file that I'm inlcuding in the iframe then?

[acoder]

Yes, that's correct.

[Logic Ali]

This will take care of it. It cannot work on cross-domain content.

<iframe src='mypage.htm' id='if1' onload='setIframeHeight( this.id )' scrolling='no'></iframe>
......
<script type='text/javascript'>

function setIframeHeight( iframeId )
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
  ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee){ }  
 }
 
 if( ifDoc )
 {
  ifRef.height = ifDoc.scrollHeight;  // Enable / disable
  // ifRef.width = ifDoc.scrollWidth; // required lines
 }
}

</script>

[KeredDrahcir]

I tried getting the height and putting it in the onload but I get permission denied. Is there someway of granting permission?

[acoder]

Is the iframe content from a different domain?

You can use server-side proxy to generate the content from your own domain.

[Frinavale]

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

[Logic Ali]

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.

[KeredDrahcir]

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?

[acoder]

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?

[KeredDrahcir]

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.

[acoder]

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.