SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Iframe onload event only after an anchor onclick

    Sample code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <iframe name="iframe_a" onload="alert('Thanks for the visit!');"></iframe>
    <a href="http://www.example.com/" target="iframe_a">Go!</a>
    </body>
    </html>
    I'd like to see the alert message after clicking on the link and when the iframe finishes loading. But now it appears on the initial page load, too. How can I achieve it?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    The following script should do the job.

    Code javascript:
    function done() {
        //some code after iframe has been loaded
    }
     
    function WaitForIFrame() {
        if (iframe.readyState !== "complete") {
            setTimeout(WaitForIFrame, 200);
        } else {
            done();
        }
    }
     
    var iframe = document.getElementById('iframe_a');
    WaitForIFrame();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The following script should do the job.

    Code javascript:
    function done() {
        //some code after iframe has been loaded
    }
     
    function WaitForIFrame() {
        if (iframe.readyState !== "complete") {
            setTimeout(WaitForIFrame, 200);
        } else {
            done();
        }
    }
     
    var iframe = document.getElementById('iframe_a');
    WaitForIFrame();
    Dear Paul,

    Is this what you mean?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <iframe name="iframe_a" onload="alert('Thanks for the visit!');"></iframe>
    <a href="http://www.example.com/" target="iframe_a">Go!</a>
    <script>
    function done() {
        //some code after iframe has been loaded
    }
     
    function WaitForIFrame() {
        if (iframe.readyState !== "complete") {
            setTimeout(WaitForIFrame, 200);
        } else {
            done();
        }
    }
     
    var iframe = document.getElementById('iframe_a');
    WaitForIFrame();
    </script>
    </body>
    </html>
    If so, it doesn't work.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    Is this what you mean?
    There are certain parts that I have left for you to complete.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    There are certain parts that I have left for you to complete.
    Here's the best I can come up with:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <iframe name="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a">Go!</a>
    <script>
    function done() {
        alert('Thanks for the visit!');
    }
     
    function WaitForIFrame() {
        if (iframe.readyState !== "complete") {
            setTimeout(WaitForIFrame, 200);
        } else {
            done();
        }
    }
     
    var iframe = document.getElementById('iframe_a');
    WaitForIFrame();
    </script>
    </body>
    </html>
    But still to no luck!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    But still to no luck!
    What is being assigned to the iframe variable?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •