How do I resize an iFrame to fit the content of the source page?

I would like to resize an iFrame to fit the content of the source page.  I am currently using the following code but it does not always work:



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

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->
</script>

<iframe name="the_iframe" onLoad="calcHeight();" scrolling="no" width="830"  id="the_iframe" src="http://www.google.co.uk" frameborder="0" allowtransparency="true"></iframe>

boris108Asked:
Who is Participating?
 
AidiakapiConnect With a Mentor Commented:
There's a typo in your code:
document.getElementById('the_iframe').height=
Should be:
document.getElementById('the_iframe').style.height=

Your actually adapting the style so add the .style, tested and it works.
0
All Courses

From novice to tech pro — start learning today.