Iframe onload event only after an anchor onclick

**Rain Lover** · 10-14-2012, 05:08 AM

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?

**keyboard1333** · 10-14-2012, 05:23 AM

Referencing a function

HTML Code:

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

HTML Code:

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

Originally Posted by keyboard1333

Referencing a function

HTML Code:

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

**keyboard1333** · 10-14-2012, 06:50 AM

Give this a try -

HTML Code:

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

Originally Posted by keyboard1333

Give this a try -

HTML Code:

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

Code:

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

Originally Posted by Rain Lover

but it doesn't work in IE8.

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

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

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

Originally Posted by bernie1227

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.

**keyboard1333** · 10-14-2012, 07:36 AM

Here's bernie's code combined with yours -

HTML Code:

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