Results 1 to 2 of 2

Thread: Dynamic iFrame Height

  1. #1
    Join Date
    Mar 2004

    Dynamic iFrame Height

    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:

    <script type="text/javascript"> 
       function resizeIframe (frame) { 
          alert('scroll height ' + frame.scrollHeight); 
          frame.height = frame.scrollHeight + 50; 
    <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>
    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 ?


  2. #2
    Join Date
    Jun 2007
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Iframe Resize to Content</title>
    <script type='text/javascript'>
    function sizeToMyContent( ifRef, setW, setH, fMargin )
     var ifDoc, margin = typeof fMargin === 'number' ? fMargin : 16;
      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;
    <iframe src="localPage.html" onload='sizeToMyContent(this, true, true)'></iframe>
    Y_U U_G_A_E_U_ B_S_A_D_

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center