PDA

View Full Version : Problems in IE8 with IFrame SSI script II



okano12
05-06-2009, 12:47 PM
1) Script Title: IFrame SSI script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/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
05-06-2009, 12:54 PM
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
05-06-2009, 01:04 PM
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
05-06-2009, 01:48 PM
Ok, your solution works fine. I had to use this meta information outside the iframe, to solve the problem.

Thanks otherwise!;)

rick_str
08-12-2009, 07:19 PM
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
09-03-2009, 01:23 PM
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
09-03-2009, 06:09 PM
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
09-29-2009, 12:05 PM
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
09-29-2009, 12:19 PM
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
09-29-2009, 08:26 PM
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/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;
} 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>

manikrag
09-30-2009, 04:05 PM
thanks but it did not work for me. Now I am trying to create iframes dynamically and not sure how to call this script thr..please have a look and let me know if you have any idea..the code is in c# and given below..

protected void Page_Load(object sender, EventArgs e)
{


HtmlGenericControl frame1 = new HtmlGenericControl("iFrame");
frame1.TagName = "iframe";
frame1.Attributes.Add("runat", "server");
frame1.Attributes.Add("style", "overflow:visible; width:100%; height:100%;");
frame1.Attributes.Add("src", "http://www.google.com");
PlaceHolder1.Controls.Add(frame1);
}

How can I use this script here? Please let me know if you have any idea as its very urgent..

Thanks,

manikrag
09-30-2009, 04:06 PM
thanks but it did not work for me. Now I am trying to create iframes dynamically and not sure how to call this script thr..please have a look and let me know if you have any idea..the code is in c# and given below..

protected void Page_Load(object sender, EventArgs e)
{


HtmlGenericControl frame1 = new HtmlGenericControl("iFrame");
frame1.TagName = "iframe";
frame1.Attributes.Add("runat", "server");
frame1.Attributes.Add("style", "overflow:visible; width:100%; height:100%;");
frame1.Attributes.Add("src", "http://www.google.com");
PlaceHolder1.Controls.Add(frame1);
}

How can I use this script here? Please let me know if you have any idea as its very urgent..

Thanks,

Sparzone
04-01-2010, 02:09 PM
Hi,

I use exactly this version of the script.




<script 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=["myframe"]

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

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

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


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>

It works in all browsers instead of Firefox is making a scrollbar. Sometimes it works properly in Firefox but mostly you have to press F5 to eliminate scrollbar.

Most of users will not press F5 and leave page soon.

Does anybody know a solution to fix the firefox scrollbar problem?

HierŽis url (http://www.anbieter-vergleichen.de/gas.html)

Sparzone
04-04-2010, 03:20 PM
Has anybody an idea?
Is there a new version of script?

url again Strom (http://www.anbieter-vergleichen.de/strom.html)

Thanks
Best regards

Unhealthydragon
04-10-2010, 12:41 AM
I found one peice of code that fixed the scrolling in FF, and fixed the IE8 bug and merged them together. It might overlap but it works so i dont care.

*****************************************************

<script 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=["myframe"]

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

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"
}
}
}
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.contentDocument && currentfr.contentDocument.documentElement.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.documentElement.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
else if (currentfr.Document && currentfr.Document.documentElement.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.documentElement.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

</script>
***************************************************

Hopefully that works for you as well. Tested for only IE and FF.

rick_str
05-16-2011, 11:02 PM
A new problem for IE9 has cropped up. Here is the modified code (changed for FF4) that I am using:



<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.

jscheuer1
08-18-2011, 06:16 PM
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if(/MSIE (\d+)/.exec(navigator.userAgent)[1] > 8){
//do something here that's only for IE 9 and greater
}
@end @*/