Hey guys, trying to build a website with at least an attempt at cross compatibility between firefox and IE. So, one thing I've noticed is that they both treat body onLoad differently. I've got an iframe and I'm changing its src to an html at a click of a button. The html it loads has an onLoad that tells the parent frame to change the iframe dimensions to match the content. This works fine, until you click the button more than once, at which point it will stay with the previously loaded dimensions. This ONLY happens in Firefox. IE works fine and the dimensions load properly. I can only assume it's due how firefox handles onload, or perhaps something to do with caching. I am pretty lost. Got any ideas, denny? top page Code: <a href="foo.html" target="iframeID">click</a><br> <iframe src="" id="iframeID" width="100%" height="0"></iframe> loaded page Code: <script language="JavaScript" type="text/javascript"> function resize() { var PageHeight = foo.scrollHeight; parent.document.getElementById('iframeID').style.height=PageHeight; var PageWidth = foo.scrollWidth; parent.document.getElementById('iframeID').style.width=PageWidth; } </script> <html> <body id="foo" onLoad="resize()"> blah blah blah </body> </html>
jQuery provides a bunch of low level DOM manipulation functions that work cross browser. Looking at your code, var PageHeight = foo.scrollHeight; foo is never defined.
YES html sucks but at least SOME is required to build a website dammit. I still don't see how i can do what I'm doing with jquery instead of iframes.... but i suppose I'll keep reading and I may think of something
If you're trying to resize the iframe to be the size of the browser window, you can do that from the top level document. $('iframe-id').setAttribute('width', whatever).setAttribute('height', whatever);
