Jquery or not / Cross Browser Compatible iframe size (IE, Chrome, Safari, Firefox)

Question

Here is my problem. I searched a lot iframe cross-browser to resize code, and I just can't find it. Everything I saw has problems in one browser over another. That's what I'm doing. I am loading an iframe on a page in an overlay of jquery tools. This iframe will load the contents of the page (in the same domain, so no need to worry about the cross domain). When the user clicks on the action in this form, the iframe will need to be resized again (it works for me when the iframe grows, but not when the iframe decreases).

I have a js file that is included in an iframe that has this function

$(window).load(function(){ parent.adjust_iframe(); }); 

This function then calls the parent page functions as follows:

 function adjust_iframe() { //i have tried both body and html and both dont work in IE var h = $("#overlayFrame").contents().find("body").height(); if(h==0) h="500"; else h=h+3; $("#overlayFrame").css({'height': h}); window.scrollTo(0,0); } 

The above code works fine in Chrome and firefox, but not in IE.

Any help here? I really need a cross browser, a lightweight compatible solution that is not related to some kind of heavy jquery plugin that is not supported.

Thanks!

Answer 1

Try

 $(window).load(function(){ var bodyHeight = $('body').height(); parent.adjust_iframe( bodyHeight ); }); 

and

 function adjust_iframe(newHeight) { //i have tried both body and html and both dont work in IE if(newHeight == 0) { newHeight = 500; } else { newHeight += 3; } $("#overlayFrame").css({'height': newHeight}); window.scrollTo(0,0); } 

Since the problem is probably that the page cannot access the contents of iframes.

Answer 2

I have 2 suggestions:

When you set the CSS height, specify the pixels explicitly.

 $("#overlayFrame").css({'height': h + 'px'}); 

When your iframe code calls parent.adjust_iframe, send the current width / height.

 parent.adjust_iframe($('body').height()); 

BONUS suggestion: Do a little investigation and let us know which version of IE and why it does not work. Put some warnings there and find out if derivatives get height, etc.

Answer 3

I searched the archive files and found a script that sets the new iframe window size. He worked on IE6, FF, ...

 /** * Parent */ <iframe id="myframe" name="myframe" ...> <script type="text/javascript"> var iframeids=["myframe"]; if (window.addEventListener) { window.addEventListener("load", resizeCaller, false); }else if (window.attachEvent) { window.attachEvent("onload", resizeCaller); } else { window.onload=resizeCaller; } var iframehide="yes"; var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]; var FFextraHeight=parseFloat(getFFVersion)>=0.1? 20 : 0; function resizeCaller() { var dyniframe=new Array(); for (i=0; i<iframeids.length; i++){ if (document.getElementById) resizeIframe(iframeids[i]); if ((document.all || document.getElementById) && iframehide=="no"){ var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); tempobj.style.display=""; } } }; function resizeIframe(frameid){ var currentfr=document.getElementById(frameid); if (currentfr && !window.opera){ currentfr.style.display=""; if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; else if (currentfr.Document && currentfr.Document.body.scrollHeight) currentfr.height = currentfr.Document.body.scrollHeight; if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false); else if (currentfr.attachEvent){ currentfr.detachEvent("onload", readjustIframe); 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; }; </script> /** * child iFrame html */ <body onResize="resizeIE()">