// JavaScript Document

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:

var iframeids=["contentPage"];

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes";

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 60 : 12 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
	var dyniframe=new Array()
	for (i=0; i<iframeids.length; i++){
		if (document.getElementById)
			resizeIframe(iframeids[i])
		//reveal iframe for lower end browsers? (see var above):
			if ((document.all || document.getElementById) && iframehide=="no"){
				var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
				tempobj.style.display="block"
			}
	}
}

function resizeIframe(frameid){
	var currentfr=document.getElementById(frameid)
	if (currentfr && !window.opera){
		currentfr.style.display="block"
		if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
			currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
		else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
			currentfr.height = currentfr.Document.body.scrollHeight;
		if (currentfr.addEventListener)
			currentfr.addEventListener("load", readjustIframe, false)
		else if (currentfr.attachEvent){
			currentfr.detachEvent("onload", readjustIframe) // Bug fix line
			currentfr.attachEvent("onload", readjustIframe)
		}
	}
}

function readjustIframe(loadevt) {
	var crossevt=(window.event)? event : loadevt
	var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
	if (iframeroot)
		resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
	if (document.getElementById)
		document.getElementById(iframeid).src=url
}

if (window.addEventListener)
	window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
	window.attachEvent("onload", resizeCaller)
else
	window.onload=resizeCaller

/* 
Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like:

<iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

Read on for configuration instructions.

Configuring the script
To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.

Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the ID entered into the script, so the script knows which IFRAMEs to adjust. You may also change the width attribute (ie: 100%) to a different value, as the script only changes the height of the iframe, but not the width.

Thirdly, in the script of Step 1, there is a variable that toggles whether browsers that don't support this script (non IE5+/NS6+) should still see the iframe(s) or not. Generally you should choose to hide the iframe in these non compatible browsers (Opera 7 included), as the iframe's height is hardwired in these cases, and part of the external page most likely will be clipped and unviewable to the viewer if the external page's height exceeds the iframe's default height.

Last but not least, as shown in the demo above, you can actually use links on your main page to load a page into your IFRAME (with the IFRAME automatically resized to that page's height of course). To do so, the link should look like this:

<a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>where "myframe" is the ID of the IFRAME you wish to load a page into, and "external.htm", the path to the page on your site to load.

*/