www.webdeveloper.com
Results 1 to 2 of 2

Thread: Iframe onload event only after an anchor onclick

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    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
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    Hi there Rain Lover,

    this code has been tested in IE8, IE9, Firefox 16.o.1, Opera 12.02 and Safari 5.1.7...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>Go Go Go</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #iframe_a_container {
        width:800px;
        height:400px;
        border:1px solid #999;
        margin:0 auto 20px;
        background-color:#fff;
        box-shadow:10px 10px 10px #666;
     }
    #iframe_a {
        display:block;
        width:100%;
        height:100%;
        border:0;
     }
    #go {
        display:block;
        width:50px;
        line-height:30px;
        border:1px solid #999;
        border-radius:5px;
        margin:auto;
        background-color:#fff;
        color:#333;
        text-align:center;
        text-decoration:none;
        box-shadow:0 0 10px #666;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    document.getElementById('go').onclick=function(){
       ifr=document.createElement('iframe');
       ifr.setAttribute('src',this.href);
       ifr.setAttribute('id','iframe_a');
    
    ifr.onload=function() {
       alert('Thanks for the visit!');
     }
       document.getElementById('iframe_a_container').appendChild(ifr);
       return false;
      }
     }
    
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    
    </script>
    
    </head>
    <body>
    
    <div id="iframe_a_container"></div>
    
    <div>
     <a id="go" href="http://www.bbc.co.uk/">Go!</a>
    </div>
    
    </body>
    </html>
    
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles