Results 1 to 7 of 7

Thread: Iframes onload?

  1. #1
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Iframes onload?

    Can anyone tell me how do i make a certain function call when the content in an iframe loads??
    I thought I could do: framename.onload
    but didn't work then i thought of doing: self.framename.onload
    but it didn't work either??
    Any help would be appreciated.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,933
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    This is how DD did it in his iframe SSI II script (crucial parts red):

    Code:
    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; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
    currentfr.height = currentfr.Document.body.scrollHeight;
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", readjustIframe) // Bug fix line
    currentfr.attachEvent("onload", readjustIframe)
    }
    }
    }
    The easiest way is to use an onload event on the page(s) being loaded into the iframe.

    This also works but is invalid according to the w3c:

    <iframe onload="doSomething();"></iframe>

    And since DD's method from above uses the iframe as element (as opposed to the iframe as named window), this might work:

    Code:
    document.getElementById('iframeId').onload=doSomething;
    Note, when using onload in code, the function called cannot accept either parameters or the parameter parenthesis. You can use a function though:

    Code:
    document.getElementById('iframeId').onload=function(){doSomething('blue', 32);}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Nope, not working. By the way can you give me an example of how to use those??
    I am a newbie so please be explicit.

  4. #4
    Join Date
    May 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Why not you put the onload function call in the iframe webpage itself rather than trying in the webpage where iframe is contained. try the otherway round if that works, just an idea!!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,933
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    shyamdev is right and that is one of the methods I suggested.

    The easiest way is to use an onload event on the page(s) being loaded into the iframe.
    I just tested the others and using the onload attribute works but, as I said before, is considered invalid HTML. This works and validates:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    onload=function(){
    var currentfr=document.getElementById('Bob')
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", something, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", something)
    currentfr.attachEvent("onload", something)
    }
    something();
    }
    
    function something(){
    alert('here');
    }
    
    </script>
    </head>
    <body>
    <iframe id="Bob" src="test1.htm"></iframe>
    </body>
    </html>
    Using the simpler:

    Code:
    document.getElementById('Bob').onload=something;
    Works but, only in FF and Opera, not in IE.

    Just a note, whatever you do to add an onload event to the iframe, the iframe must be parsed by the browser first unless you use the attribute method which, again, is invalid, though it works:

    HTML Code:
    <iframe onload="something();"></iframe>
    Last edited by jscheuer1; 05-22-2006 at 05:41 PM. Reason: add missing ' to the FF/Opera only method
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ok thanks!!

    Thanks shyamdev and jscheuer1. I am sorry to bother you for long. Both of your ideas of putting the onload function call in the iframe webpage itself rather than trying in the webpage where iframe is contained is good and right but ... the pages that should be loaded in my frame is not local pages. It's something like <input type="text"><input type="submit" onclick="load_url_from_the_textarea_to_the_frame()" when this button is clicked load the webpage in the iframe and the iframe markup looks like this: <iframe src=""></iframe>
    So unfortunately I am not sure that works. Anyways thanks guys. I think I will try the idea jscheuer1's idea again. Who know's it might work as you have also given me the example.

  7. #7
    Join Date
    Aug 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I was having this same problem. My code worked in every browser but IE. Here is my solution:

    My original code was:

    <iframe id="id" name="id" onload="function_name();" scrolling="auto" frameborder="1" src="example.asp"</iframe>
    The working code is:

    <iframe id="id" name="id" onload="return function_name();" scrolling="auto" frameborder="1" src="example.asp"</iframe>
    I didn't think I was passing anything because my JavaScript doesn't have a return functionality to it but if it works..it works. This still work fine in Chrome and Firefox.

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
  •