Iframe onload event only after an anchor onclick

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

Code:

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

Originally Posted by keyboard1333

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

Originally Posted by bernie1227

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:

Code:

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

Code:

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

Edit:
If you only want it to fire once -

HTML Code:

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

Originally Posted by jscheuer1

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

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 is good.

Thread: Iframe onload event only after an anchor onclick

Thread Tools

Search Thread

Similar Threads

Modal onload event?

Onclick event -> onload event

Jump to anchor tag onload

Use different tag for onload event

Onload versus onclick event handler

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions