@guy

A blog on technology and web culture

Guy Malachi


Source CodeResizing an iframe according to its contents

This code will only work on Microsoft Internet Explorer 5.5+, Mozilla Firebird, and Netscape 7 (as far as I know).
After we learned how to create an iframe with a height of 100%, I'll show you how to create an iframe that gets its height according to the contents of the page that is in it.
That way if you have a long page inside your iframe then your iframe will be tall enough so that you can scroll the external page without scrolling the iframe itself.
You may find this useful in certain cases but I recommend not using it unless you really need it (since you may miss the entire point of using an iframe in the first place).

The Code

In the head of your document enter the following JavaScript code:
<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>

and in the body create the iframe tag:
<iframe width="700" id="the_iframe" 
	onLoad="calcHeight();" 
	src="testing_page.shtml" 
	scrolling="NO" 
	frameborder="1" 
	height="1">
An iframe capable browser is 
required to view this web site.
</iframe>





If you decide to use this code all I ask is that you .


Thanks to all the people who sent me their comments on this code and helped me improve it :o)
© 2011 Guy Malachi atguy.com, All Rights Reserved