Iframe auto resize, expands but does not contract in IE/Safari.

http://isensors.com.sg/isensors-GJ/

That's the page I'm working on now, the script I'm using from here: http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007.

It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE.

<script type="text/javascript">

//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=["contentframe", "newsframe"]

//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? 3 : 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++){
var iframeid = iframeids[i];
if (document.getElementById)
resizeIframe(iframeid)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid)
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+50;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight+50;
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>

Could someone kindly help me find the problem? Thanks.

It contracts, but only after some background process ends. It might be related with the fact that you have a JavaScript error in your documents. You call a YAHOO object which is not defined. Maybe you miss a file from the Yahoo API.

Hi Kod, thanks for the reply.

Are you sure it contracts in Safari? And could you kindly point out the error as I did not write this code, i merely adapted it for my use.

What about in I.E, do you know why it isn't working at all?

Hi Kod, thanks for the reply.

Are you sure it contracts in Safari? And could you kindly point out the error as I did not write this code, i merely adapted it for my use.

What about in I.E, do you know why it isn't working at all?
You said IE and safari. I have no Safari (I work on Win7), but I have tested in IE. In IE it works, but only after a considerable period (several seconds). Meanwhile the windows wait cursor shows that a process (I don't know which) works in background. Only after that process ends, the iframe is re-sized.

Thanks for pointing out. I don't have IE myself, so I only got a short glimpse at it. Will try again.

I know this sounds stupid, but which part did I call a YAHOO object? I have no idea what that is.

I know this sounds stupid, but which part did I call a YAHOO object? I have no idea what that is.news.asp is trying to load the following files, which do not exist:

<script type="text/javascript" src="./js/yahoo-min.js" ></script>
<script type="text/javascript" src="./js/dom-min.js" ></script>
<script type="text/javascript" src="./js/event-min.js" ></script>

ok thanks.

The code you're using seems to be installing event handlers twice for the same function. I also notice that one iframe has two different IDs, so it's not certain which frame is the target.

I would scrub that code and just use the much simpler code below, which I'm sure will work.

The event handler could be installed unobtrusively, but in the case of iframes, I.E. requires setAttribute to be used, so I just simplified it for now.
<script type='text/javascript'>

function setIframeHeight( iframeId )
{
var ifDoc, ifRef = document.getElementById( iframeId );

try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}

if( ifDoc )
{
ifRef.height = ifDoc.scrollHeight; // Enable / disable
// ifRef.width = ifDoc.scrollWidth; // required lines
}
}

</script>

<iframe onload='setIframeHeight( this.id )' id="newsframe" name="newsframe" src="news.asp" width="100%" scrolling="no" frameborder="0" class="contentframe"></iframe>

Thanks Logic All, the new code works on firefox, but not on Internet Explorer still, I just tried it and the page just doesn't resize.

I have no idea why I have 2 id, I didn't even write that, I think Dreamweaver added it in on it's own when I opened the file with it and made a few changes.

The code works on Safari for expanding, but it still doesn't contract when the loaded page becomes smaller.

I've also fixed the missing JS files.

Thanks, have a look again.
http://isensors.com.sg/isensors-GJ/

The reason it doesn't work in I.E. is because the framed documents don't have a doctype. Just give them the same doctype as the paent pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I don't see a problem in (Windows) Safari.

Hey thanks Logic Ali!

It's working now, such a simple mistake on my part!

Thanks for all the help guys!