Log in

View Full Version : Iframe onload event only after an anchor onclick


Rain Lover
10-14-2012, 05:08 AM
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?
keyboard
10-14-2012, 05:23 AM
Referencing a function


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function on_iframe_load() {
document.getElementById('iframe_a').onload = function() {
alert('Thanks for the visit!');
};
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load()">Go!</a>
</body>
</html>


or

Inline


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="document.getElementById('iframe_a').onload = function() {alert('Thanks for the visit!');};">Go!</a>
</body>
</html>
bernie1227
10-14-2012, 05:39 AM
The reason it appears on the initial page load, is it triggers the alert once the iframe loads when the page first loads. I've made you a jsfiddle to demonstrate what you want:
http://jsfiddle.net/bernie1227/ssNUA/1/
Rain Lover
10-14-2012, 06:16 AM
Referencing a function


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function on_iframe_load() {
document.getElementById('iframe_a').onload = function() {
alert('Thanks for the visit!');
};
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load()">Go!</a>
</body>
</html>


Thanks for the answer, but it doesn't work in IE8.
keyboard
10-14-2012, 06:50 AM
Give this a try -


<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#iframe_trigger').click(function() {
$('#iframe_a').load(function() {
alert('Thanks for the visit!');
});
});
});
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" id="iframe_trigger">Go!</a>
</body>
</html>
Rain Lover
10-14-2012, 06:54 AM
Give this a try -


<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#iframe_trigger').click(function() {
$('#iframe_a').load(function() {
alert('Thanks for the visit!');
});
});
});
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" id="iframe_trigger">Go!</a>
</body>
</html>

Same result -- IE is a pain! I don't know why but the following seems to work:


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe id="iframe_a" name="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="say();">Go!</a>
<script type="text/javascript">
function say() {
document.getElementById('iframe_a').setAttribute("onload", "alert('Thanks for the visit!')");
}
</script>
</body>
</html>
bernie1227
10-14-2012, 06:57 AM
but it doesn't work in IE8.

did you take a look at my jsfiddle? It should work in ie8.


crosspost again: if you've got it sorted:
If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.
jscheuer1
10-14-2012, 07:05 AM
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function on_iframe_load(){
var frame = document.getElementById('iframe_a');
if (window.addEventListener){
frame.removeEventListener('load', on_iframe_load.loadfunc, false);
frame.addEventListener('load', on_iframe_load.loadfunc, false);
}
else if (window.attachEvent){
frame.detachEvent('onload', on_iframe_load.loadfunc);
frame.attachEvent('onload', on_iframe_load.loadfunc);
}
}
on_iframe_load.loadfunc = function() {
alert('Thanks for the visit!');
};
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.dynamicdrive.com/" target="iframe_a" onclick="on_iframe_load(); return true;">Go!</a>
</body>
</html>
Rain Lover
10-14-2012, 07:29 AM
did you take a look at my jsfiddle? It should work in ie8.

Yes, and thanks for the example! But to tell the truth I don't know how to include your code in my sample code.
keyboard
10-14-2012, 07:36 AM
Here's bernie's code combined with yours -


<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function() {
var iframe = document.getElementById("iframe_a");
var onload = iframe.onload;
if (typeof iframe.onload != 'function') {
iframe.onload = alert_change;
} else {
window.onload = function() {
onload();
alert_change();
}
}
};
function alert_change() {
alert("thanks for visiting!");
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a">Go!</a>
</body>
</html>


But jscheuer's code should work just fine.

edit -
Bernie, I deleted your post as you edited it to contain exactly the same code as mine (it was pointless)
bernie1227
10-14-2012, 07:44 AM
Another option of course, is to trigger the listen() function when you click the button. Whichever you prefer, but the way I just mentioned means that the function only runs when you click the button.



<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function listen() {
var iframe = document.getElementById("iframe_a");
var onload = iframe.onload;
if (typeof iframe.onload != 'function') {
iframe.onload = alert_change;
} else {
window.onload = function() {
onload();
alert_change();
}
}
};
function alert_change() {
alert("thanks for visiting!");
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="listen()">Go!</a>
</body>
</html>
Rain Lover
10-14-2012, 07:46 AM
Here's bernie's code combined with yours

That doesn't work in IE8, either.


jscheuer's code should work just fine.

John is a super coder and his codes always work although I was expecting something simpler.
Thanks again! :)
bernie1227
10-14-2012, 07:47 AM
As I said before:
If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.
Rain Lover
10-14-2012, 08:05 AM
Thank you so much, John! :)
Rain Lover
10-14-2012, 08:07 AM
As I said before:
If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.

Done!
jscheuer1
10-14-2012, 08:42 AM
You're welcome! I was playing around a bit more. Here's ar version that only alerts the first time:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function on_iframe_load(way){
var frame = document.getElementById('iframe_a');
if (window.addEventListener){
way === 'remove' && frame.removeEventListener('load', on_iframe_load.loadfunc, false);
way === 'add' && frame.addEventListener('load', on_iframe_load.loadfunc, false);
}
else if (window.attachEvent){
way === 'remove' && frame.detachEvent('onload', on_iframe_load.loadfunc);
way === 'add' && frame.attachEvent('onload', on_iframe_load.loadfunc);
}
}
on_iframe_load.loadfunc = function() {
on_iframe_load('remove');
alert('Thanks for the visit!');
};
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.dynamicdrive.com/" target="iframe_a"
onclick="on_iframe_load('add'); this.onclick = function(){return true;};"
>Go!</a>
</body>
</html>
Rain Lover
10-14-2012, 08:42 PM
I really appreciate everyone's help on this thread!
I came up with a solution and would be happy to know what you think:


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe id="iframe_a" name="iframe_a" onload="if(this.className=='active'){alert('Thanks for the visit!');};"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="document.getElementById('iframe_a').className='active';">Go!</a>
</body>
</html>
keyboard
10-14-2012, 11:04 PM
It works fine... personally, I'd go with John's solution just to avoid cluttering up your html with inline js. (or even do what you did inside a function)
P.s. If your still looking for more responses, I'd suggest changing the thread fromm resolved... Only set it to resolved when you don't want people to post anymore.


If you only want it to fire once -

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe id="iframe_a" name="iframe_a" onload="if(this.className=='active'){alert('Thanks for the visit!');this.className='inactive';};"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="document.getElementById('iframe_a').className='active';">Go!</a>
</body>
</html>
jscheuer1
10-14-2012, 11:52 PM
I'm a big fan of 'whatever works' as long as it's truly cross browser and truly accomplishes your aim.

With this latest from Rain Lover we would probably see (as we would with most of the workable solutions offered so far) every load of the iframe after page load firing the alert. That includes navigation within the iframe, as well as clicking on the link a second, third, etc. time(s). I guess what I'm trying to say, rather ask, is, "What exactly do you want to accomplish, and why?"
Rain Lover
10-15-2012, 06:50 PM
I guess what I'm trying to say, rather ask, is, "What exactly do you want to accomplish, and why?"

The fact is I was going to customize a Google Docs form when I came across the following problem:
Redirect a Google Docs form to your custom 'thank you' page (http://www.dynamicdrive.com/forums/showthread.php?71610-Redirect-a-Google-Docs-form-to-your-custom-thank-you-page)

There was no more answers and I wasn't satisfied with the only solution offered. So I tried to paraphrase my question with a similar problem. But now I guess(?) bernie's solution (http://www.dynamicdrive.com/forums/showthread.php?71610-Redirect-a-Google-Docs-form-to-your-custom-thank-you-page&p=284330#post284330) is good.