Iframe onload event only after an anchor onclick

Sample 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?

<!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>

<script type="text/javascript">

function init(){
  test=true; 
document.getElementById('go').onclick=function(){
  ifr=document.createElement('iframe');
  ifr.setAttribute('src',this.href);
  ifr.src=this.href; /* IE8 needs this */
  ifr.setAttribute('id','iframe_a');

ifr.onload=function() {
if(test==true){ /* this ensures a one off alert */
  alert('Thanks for the visit!');
  test=false;
  }
 }
  document.getElementById('iframe_a_container').appendChild(ifr);
  return false;
  }
 }

  window.addEventListener?
  window.addEventListener('load',init,false):
  window.attachEvent('onload',init);

</script>

<!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(){ 

   test=true;

document.getElementById('go').onclick=function(){
   ifr=document.createElement('iframe');
   ifr.setAttribute('src',this.href);
   ifr.src=this.href;
   ifr.setAttribute('id','iframe_a');

if(test==true){

ifr.onload=function() {
   alert('Thanks for the visit!');
  }
ifr.onreadystatechange=function(){
if(this.readyState=='complete'){
   alert('Thanks for the visit!');
   }
  }
   document.getElementById('iframe_a_container').appendChild(ifr);
   test=false;
  }
   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/iplayer/">Go!</a>
</div>

</body>
</html>

Iframe onload event only after an anchor onclick

Rain_Lover

birdbrain

Rain_Lover

birdbrain

birdbrain

birdbrain

Rain_Lover

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week