homepage Welcome to WebmasterWorld Guest from 54.197.15.196
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Iframe onload event only after an anchor onclick
Rain_Lover



 
Msg#: 4507876 posted 5:24 am on Oct 14, 2012 (gmt 0)

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?

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4507876 posted 9:24 am on Oct 14, 2012 (gmt 0)

Hi there Rain Lover,

here is my little attempt at solving your problem...

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


Of course, my CSS will be better than my javascript. :)

birdbrain

Rain_Lover



 
Msg#: 4507876 posted 9:27 am on Oct 14, 2012 (gmt 0)

Very beautiful! But it doesn't work in IE8.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4507876 posted 9:51 am on Oct 14, 2012 (gmt 0)

Hi there Rain Lover,

I only tested it in IE9 and with Compatibility Mode for IE8.

I will turn on my old pc to test in real IE8. ;)

birdbrain

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4507876 posted 10:35 am on Oct 14, 2012 (gmt 0)

Hi there Rain Lover,


This amended code will work in IE8 and I have also fine tuned the code to alert once only. ;)

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


birdbrain

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4507876 posted 12:32 pm on Oct 14, 2012 (gmt 0)

Hi there Rain Lover,

The code in my previous post did get the "iframe" to work in IE8, but not the alert. :(

After a little research I have managed to overcome that obstacle...

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


birdbrain

Rain_Lover



 
Msg#: 4507876 posted 9:22 pm on Oct 14, 2012 (gmt 0)

Dear birdbrain,

Thank you so much for your time!
You're always helpful. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved