SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird Firefox Issue with iFrame Resize Script

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

    Code:
    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
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  5. #5
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the script in head of page

    Code:
    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
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •