Problems in IE8 with IFrame SSI script II

[okano12]

1) Script Title: IFrame SSI script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iframessi2.htm

3) Describe problem:
The script doesn't resize to the height of the included html-page when I use the Internet Explorer 8. So is there sn solution that the script will work with IE8?

I will realy appreciate if you can solve this problem.

[Snookerman]

Until a fix is found, you can make IE8 emulate IE7 by adding this meta tag to the head section of your page:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

Good luck!

[okano12]

That was realy a fast answer!! Thanks for your help.

During the installation, there was an option to enable compatibility mode for websites made for old versions of IE. So with your solution I can declare my site by default as one of these sites.

Thats great, I will try this.

You will get some feedback later!

[okano12]

Ok, your solution works fine. I had to use this meta information outside the iframe, to solve the problem.

Thanks otherwise!

[rick_str]

I can confirm that this is still a problem in IE8 as well as Opera 9.64. See page at:

http://www.protonic.com/?page=proto.downloads

This page loads and works correctly in Chrome (latest), Safari 4.03, and FireFox 3.51.

Interestingly it is used at http://www.protonic.com/?page=proto.blog and it works in ALL browsers.

Both are displlayed as usual and the code for "proto.downloads.php" is as follows:

<iframe id="pdl" src="/clients/protodownloads/index.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

index.php constructs a page on the fly from a database and formats it in the $gradient variable and then displays the $gradient variable:

echo $gradient;
flush();

Anyone have any ideas as to why it usually works in IE8 and Opera bit not here??

[geoffbeaumont]

The problem is that the script checks for currentfr.contentDocument.body.offsetHeight and uses that if present, falling back on currentfr.Document.body.scrollHeight for IE. IE8 adds support for contentDocument, but misreports currentfr.contentDocument.body.offsetHeight as the height of the iframe window not the document body.

Opera (v9) also misreports the body.offsetHeight in the same way, and doesn't support frame.Document (which is IE only). However, it does report the non-standard scrollHeight property correctly, and can access it as currentfr.contentDocument.body.scrollHeight (as can every other browser I've tried).

To fix this issue, replace this function in the script:

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)
}
}
}

with this:

function resizeIframe(frameid){
	var currentfr=document.getElementById(frameid)
	if (currentfr){
		currentfr.style.display = "block"; 
		if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
			currentfr.height = currentfr.Document.body.scrollHeight;
		else if (currentfr.contentDocument && currentfr.contentDocument.body.scrollHeight) //ns6+ / opera syntax
			currentfr.height = currentfr.contentDocument.body.scrollHeight + FFextraHeight;
		else if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //standards compliant syntax - probably nothing will drop through to this
			currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
		if (currentfr.addEventListener)
			currentfr.addEventListener("load", readjustIframe, false);
		else if (currentfr.attachEvent) {
			currentfr.detachEvent("onload", readjustIframe);  // Bug fix line
			currentfr.attachEvent("onload", readjustIframe);
		}
	}
}

I've checked this in (on WinXP):
IE 6, 7, 8
FF 2.0, 3.0, 3.5
Opera 9
Safari 4
Chrome 2

Geoff

[rick_str]

YEA... WELL DONE!!!.... Now I can display auto resizing I FRAMES as much as I like!!!!!!

It seems to work in ALL browsers now... Perhaps IFrame SSI script II should be updated to IFrame SSI script III and posted.

[manikrag]

Hi Team,

For me the fix is not working for all browsers. I am facing same issue with IE8, FF1.5 & Chrome.

Please help if possible.

Thanks,
Manik
\m/

[manikrag]

Or my case is diff. cause I am dynamically using IFRAMES. Let me give you an example.

I am dynamically loading the src after postback and the script could not make size zero of the iframe if the src is blank..

<iframe id="myframe2" src="<%= src1%>" frameborder=0 scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:inherit; width:100%; display:none"></iframe>

or the script is loading the default size i.e 180px if the child page has very less content

Thanks,
Manik

[rick_str]

Here is the version of the full script with all changes suggested by "geoffbeaumont":

<script language="javascript" type="text/javascript">
<!--	
/***********************************************
* 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=["dynamicIframe"]

//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? 16 : 0 //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"
}
}
}

/*************************************************************
* Fix for IE8 / Opera display errors (replaces function above
* http://www.dynamicdrive.com/forums/s...ad.php?t=44718
* Thanks to geoffbeaumont He says:
* The problem is that the script checks for currentfr.contentDocument.body.offsetHeight and uses that if present, falling back on currentfr.Document.body.scrollHeight for IE.
* IE8 adds support for contentDocument, but misreports currentfr.contentDocument.body.offsetHeight as the height of the iframe window not the document body.
*
* Opera (v9) also misreports the body.offsetHeight in the same way, and doesn't support frame.Document (which is IE only).
* However, it does report the non-standard scrollHeight property correctly, and can access it as currentfr.contentDocument.body.scrollHeight (as can every other browser I've tried).
*
* He says: "To fix this issue, replace this function in the script:"
//	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)
//	}
//	}
//	}
* with:
**************************************************************/

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr) {
currentfr.style.display = "block"; 
if (currentfr.Document && currentfr.Document.body.scrollHeight) {	                                                               //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
} else if (currentfr.contentDocument && currentfr.contentDocument.body.scrollHeight) {			//ns6+ / opera syntax
currentfr.height = currentfr.contentDocument.body.scrollHeight + FFextraHeight;
} else if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) {			//standards compliant syntax - probably nothing
																				
// will drop through to this
currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
}
if (currentfr.addEventListener) {
currentfr.addEventListener("load", readjustIframe, false);
} else if (currentfr.attachEvent) {
currentfr.detachEvent("onload", readjustIframe);  // Bug fix line
currentfr.attachEvent("onload", readjustIframe);
}
}
}
/***********************************************
* End of fix for IE8 / Opera
***********************************************/

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
}
//-->
</script>