Resize IFrame

[BigGJonsey]

I've been able to get the iFrame to resize to the content - see this link - it's pretty simple.

My only problem, is if the user clicks a link so that another page is displayed, the iFrame doesn't resize. It will only resize when the parent page is reloaded. So, not sure what to do about that.

Any thoughts / advice would be appreciated. (I do work with someone who writes Javascript and PHP, so they would know how to implement it if I found a solution).

Thanks

[BigGJonsey]

Forgot the link for the 1 time only resize:

http://guymal.com/mycode/iframe_size/

[itsjareds]

After a Google search, it seems other people have had the same problem. There is no event handler for iframe location changing (as of now). However, if you can edit the source page of your iframe, you can add some javascript calls inside the frame document like this:

// This uses the function named on the link you posted
window.top.calcHeight();

[Airshow]

BigGJonsey,

I recently investigated iFrame resizing for a client and our eventual conclusion was .... not to use an iFrame.

We were fortunate in that we had control of all content, outside and inside the frame, so an alternative solution was readily available. Realise that you may not be so lucky.

This, for what it's worth.

Airshow

[essential]

This will achieved what you entirely needed!

To be able to work on this script, you must obtained the following procedure.

INSTRUCTION:

All (x)HTML documents' that will be loaded inside the iframe, including the iframe page, must include the resize.js inside its content using <script type="text/javascript" src="./resize.js"></script> block.

NOTE Supported document's must be inside your domain, outer-source will not be penetrated by the script.

Since the major function of this script is to inject new code line's inside the document that is being loaded in your iframe and also referenced with the resize.js...

This script will automatically fit your iframe height, depending on the scrollHeight of document being loaded inside the iframe.

resize.js

<<<NO NEED TO EDIT>>>

/******************************
Freshly Baked Script Developed By DANIuser : essential -
 *   Created : May 23rd, 2009 -
 * Title : Iframe Fitter v1.0 -
 * This notice MUST stay intact for use - 
******************************/
var $load;
var $tagNames;
var $iframe;
var $script, script;
var $tags;

   $tagNames = Boolean( document.getElementsByTagName ); 

$tags = Object.prototype.$tags = function( isTag ) {
   if ( $tagNames ) {
      return document.getElementsByTagName( isTag );
   } else if ( document.all && !document.getElementByI ) {
      return document.all.tags( isTag );
   } return alert("Unsupported JavaScript Features!\nPlease upgrade your browse.");
};
   $iframe = function( ref ) {
      $function = "\nvar testFunc, iHeight, iWidth;\n";
      $function += "var myFrame;\n";
      $function += "testFunc = function() {\n";
      $function += "iHeight = document.body.scrollHeight;\n";
      $function += "myFrame = window.top.$tags('iframe')[0];\n";
      $function += "if ( !myFrame.style.height ) {\n";
      $function += "myFrame.style.height = iHeight + 'px';\n";
      $function += "}\n";
      $function += "else {\n"; 
      $function += " myFrame.setAttribute( 'style', 'height : ' + iHeight + 'px;' );\n";
      $function += "}\n};\n";
      $function += "$load( testFunc );\n";
      script = document.createTextNode( $function );
      $script = document.createElement("script");
      $script.type = "text/javascript";
      $script.appendChild( script );
   if ( $tagNames ) {      
         if ( self.frames.length !== 0 ) {
         return false;
         }  else {
         $tags("head")[ ref ].appendChild( $script ); 
        }
     } else {
     $tags("head")[ ref ].insertAdjacentElement("afterEnd", $script );
     }
  };

// Based on Simon Willison's addLoadEvent -->

// This is highly needed for multiple load events.
    
$load = function( myFunc ) {
   thisFunc = window.onload;
   if ( typeof window.onload !== "function" ) {
      window.onload = myFunc;
   } else {
      window.onload = function() {
         if ( thisFunc ) {
            thisFunc( );
         } myFunc( );
      };
   }
}; $load( $iframe( 0 ) );

iframe.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Iframe Page</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : auto;
  overflow : hidden;
  width : 98%;
   }

div.tube {
  border : 1px solid #ccc;
  min-height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

iframe {
  border : 1px solid #ccc;
  height : auto;
  display : block;
  margin : 0 auto;
  width : 100%; }

table {
   border : none;
   border-collapse : collapse;
   height : inherit;
   width : 99%;
   margin : 0 auto;
   text-align : center;
   }

tbody td { 
  padding : 1em 0 1em 0;
  border : none; }
/* ]]> */
</style>
<script type="text/javascript" src="./resize.js"></script>
</head>
<body>
<div id="main">
<div class="tube">
<table id="framed" frame="void" border="0" cellpadding="0" cellspacing="0" rules="none" summary="Resizing Iframe with JavaScript">
<tr>
<td style="background-color : #f0f0f0;">
<iframe id="iframes" name="iframes" src="iframe1.html" scrolling="no"></iframe></td>
</tr>
</table>
<p><a target="iframes" href="testpage1.html">Test Page1</a> <a target="iframes" href="testpage2.html">Test Page2</a></p>
</div>
</div>
</body>
</html>

[essential]

There's been an update on the code, and you might just want to check it out in the snippet area.

[bobbravo2]

After a Google search, it seems other people have had the same problem. There is no event handler for iframe location changing (as of now). However, if you can edit the source page of your iframe, you can add some javascript calls inside the frame document like this:

// This uses the function named on the link you posted
window.top.calcHeight();

Hey - thanks for this - it worked for me, I just replaced the function with the one I'm using, which is based on the Joomla! IFrame auto-height implementation. Here is the javascript that resizes the IFrame based on the content's height:

<script language="javascript" type="text/javascript">
function iFrameHeight() {
	var h = 0;
	if ( !document.all ) {
		h = document.getElementById('blockrandom').contentDocument.height;
		document.getElementById('blockrandom').style.height = h + 60 + 'px';
	} else if( document.all ) {
		h = document.frames('blockrandom').document.body.scrollHeight;
		document.all.blockrandom.style.height = h + 20 + 'px';
	}
}
</script>

The problem is that the <IFrame> element has an onLoad event, which only triggers re-calculating the height with a HTTP request. I strategically placed calls using a spacer.gif and the onload event.

Here is how I called the function throughout the contained (IFramed) pages:

<img src="images/spacer.gif" onload="window.top.iFrameHeight();" style="display:none" height="0px" width="0px"/>

[Airshow]

Confess I've never heard of contentDocument, but the frameHeight() function should be far more resistant to failure written like this:

function iFrameHeight() {
	el = (document.getElementById) ? document.getElementById('blockrandom') : (document.frames) ? document.frames('blockrandom') : (document.all) ? document.all.blockrandom : null;
	if (!el) { return; }
	var h = (el.contentDocument) ? parseInt(el.contentDocument.height) : (document.body) ? parseInt(document.body.height) : null;
	if (!h) { return; }
	var delta = (el.contentDocument) ? 60 : 20;
	el.style.height = (h + delta) + 'px';
}

I've not actually tried running it, so please test before deploying. (Besides I'm sure Essential will be able to check it and probably make it even safer).

Airshow