Menu
Community /Pin to ProfileBookmark
@cootheadOct 14.2012 — #Hi there Rain Lover,
this code has been tested in IE8, IE9, Firefox 16.o.1, Opera 12.02 and Safari 5.1.7...
[i]coothead[/i]
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?
Sign in
to post a comment1 Comments(s) ↴
0
@cootheadOct 14.2012 — #Hi there Rain Lover,this code has been tested in IE8, IE9, Firefox 16.o.1, Opera 12.02 and Safari 5.1.7...
[color=navy]<!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>
[/color][i]coothead[/i]