A new problem for IE9 has cropped up. Here is the modified code (changed for FF4) that I am using:
Code:
<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=["quickie"]
//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 / RS Jan 2011
//var FFextraHeight=parseFloat(getFFVersion)>=0.1? 20 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers / RS May 2011 20px keeps FF4 from scrolling.
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/showthread.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;
//
//******** The following 2 lines are not needed for Standards complient browsers / RS Jan 2011
//
// else if (currentfr.contentDocument && currentfr.contentDocument.body.scrollHeight) //ns6+ / opera syntax
// currentfr.height = currentfr.contentDocument.body.scrollHeight + FFextraHeight;
//
//******** END - The following 2 lines are not needed for Standards complient browsers / RS Jan 2011
//
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>
When the iframe is loaded in IE there is about 60 PX vertical space below the item in the frame. In FF4 all is ok.
How do I detect IE9 to eliminate the dead space below the item?
ADDENDUM: IE also adds space below the resized frame whenever it is reloaded. Apparently it is using the FF "FFextraHeight" and adding it when it could very well just skip it.
Reply With Quote
Bookmarks