skip to Main Content

Autoresize Iframe

Ever had a hard time autoresizing iframes with different size content? You could try this one. Simply place this script in the head portion of your page, be sure to replace “thisFrame”with the id of your iframe…

<script language="JavaScript"> 
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('thisFrame').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('thisFrame').height=
      the_height;
}
//-->
</script>
This is how you display your iframe:
<iframe width="400" height="20" src="putyourfilenameh.ere" onLoad="calcHeight();"
scrolling="NO" frameborder="1" id="thisFrame" name="thisFrame"></iframe>

This may not be a totally 100% perfect solution… in WordPress this solution does have some bugs for ie.. but on static pages it would work fine.. 🙂

source : http://www.iframehtml.com/
demo : http://www.iframehtml.com/resizable-demo.html

Update: This looks like it’s a better code.. cross browser too..

<script language="JavaScript"> 
function frameResize(frameObj) {
    var frameHeight;
 
    // Reset the height back to it's original (shrink the frame)
    frameObj.height = '800px';
 
    // Set the frame height to match the content
    frameHeight = frameObj.contentWindow.document.body.scrollHeight;
    frameObj.height = frameHeight + 'px';
}
</script>

<iframe width="980" height="800" src="https://source.url"
onLoad="frameResize(this);"  marginheight="0" frameborder="0" id="thisFrame" 
name="thisFrame"  style="margin-left:-25px;" ></iframe>

source: http://blog.jandorsman.com/2011/08/dynamically-resizing-an-iframe/

Alphonse

Editorial Staff at ETN Multimedia is led by Alphonse Tan. Page maintained by Alphonse Tan

Back To Top