Dynamic iFrame Height

**welshgaz** · 04-28-2010 08:00 AM

Hi All,

I've built in an iFrame that pulls in various other pages of variable height. Can you make this iFrame render its size based on it's src content ?

I've been trying to use the scrollHeight of the frame but it isn't working. My current code:

Code:

<script type="text/javascript"> 
   function resizeIframe (frame) { 
      alert('scroll height ' + frame.scrollHeight); 
      frame.height = frame.scrollHeight + 50; 
   } 
</script> 

<iframe frameborder="0" id="cframe" marginheight="0" marginwidth="0" onload="return resizeIframe(this);" scrolling="no" src="../resources/test.html" width="100%">
   <p>Your browser does not support iframes.</p>
</iframe>

Basically my code always renders the scrollHeight at 150 but the test.html I'm pulling into the frame I've made a height of 500px ?

Ideas ?

Thanks

**Sterling Isfine** · 04-28-2010 10:05 AM

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe Resize to Content</title>
</head>

<body>
<script type='text/javascript'>

function sizeToMyContent( ifRef, setW, setH, fMargin )
{
 var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 16;
 
 try
 { 
  ifDoc = ifRef.contentWindow.document.getElementsByTagName("body")[0];
 }
 catch( e ){ ifDoc = null; }
 
 if( ifDoc )
 {
  if( setH ) 
   ifRef.height = ifDoc.scrollHeight + margin; 
 
  if( setW ) 
   ifRef.width = ifDoc.scrollWidth + margin;
 }
  
}
</script>

<iframe src="localPage.html" onload='sizeToMyContent(this, true, true)'></iframe>

</body>
</html>

Thread: Dynamic iFrame Height

Thread Tools

Display

Dynamic iFrame Height

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions