Weird Firefox Issue with iFrame Resize Script

JavaScript
1

Ok, here is my script that works just fine in IE. Onload I want the iframe to resize to the content loaded within it:


function calcHeight()
{
document.getElementById('loadapi').style.display = "";  
  //find the height of the internal page
  var the_height=document.getElementById('loadapi').contentWindow.document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('loadapi').height=the_height;
}

//and the form in page

<iframe width="700" id="loadapi" onload="calcHeight();" style="display:none;" scrolling="no" frameborder="0" height="500" name="loadapi"></iframe>

Okay, works great in IE but when I try to do in Firefox, I get an error and the iframe does not resize:

Error: document.getElementById(“loadapi”).contentWindow.document.body is undefined

What gives?

Thanks
Ryan

2

Your function would have to look something like this:
function calcHeight() {
document.getElementById(‘loadapi’).style.display = “”;
//find the height of the internal page
var the_height = loadapi.document.body.scrollHeight;

//change the height of the iframe
document.getElementById(‘loadapi’).style.height = the_height +‘px’;
}

Do bear in mind that you may have problems usin this script when the source is located on an external site…

3

Thx for the help, but now I get a

Error: loadapi.document.body is undefined

It’s weird, since this same exact script works fine in Firefox when I use on another page. The only difference is that I call the script by doing parent. inside the iframe.

Ryan

*Does work in IE thought

4

Figured out why the issue is happening.

In the iframe I’m loading an XML and not an HTML document. I don’t think Firefox likes this, as with an HTML document the script works fine.

Cheers
Ryan

5

Firefox does not normally have problems with xml documents. It sounds like you are calling the function before the readystate of the page is complete. Can you provide the complete code of the page? It would be easier to debug if i knew what the page looks like

6

Here is the script in head of page


function calcHeight()
{
document.getElementById('loadapi').style.display = "";  
  //find the height of the internal page
  var the_height=document.getElementById('loadapi').contentWindow.document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('loadapi').height=the_height;
  
}

//opens page in iframe on click
function ipop(fid) {
var filmid = fid.value;
window.frames["loadapi"].location.href='page.php?fid='+ filmid;

}

in body

<iframe width=“700” src=“” id=“loadapi” onload=“calcHeight();” style=“display:none;” scrolling=“no” frameborder=“0” height=“500” name=“loadapi”></iframe>

That’s about it. Works when I source to an HTML, but not when I do to XML.

Cheers
Ryan