www.webdeveloper.com
Results 1 to 2 of 2

Thread: Dynamic iFrame Height

  1. #1
    Join Date
    Mar 2004
    Posts
    12

    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:

    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

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    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 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



Recent Articles