iFrame src change event detection? iFrame src change event detection? jquery jquery

iFrame src change event detection?


You may want to use the onLoad event, as in the following example:

<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>

The alert will pop-up whenever the location within the iframe changes. It works in all modern browsers, but may not work in some very older browsers like IE5 and early Opera. (Source)

If the iframe is showing a page within the same domain of the parent, you would be able to access the location with contentWindow.location, as in the following example:

<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>


Answer based on JQuery < 3

$('#iframeid').load(function(){    alert('frame has (re)loaded');});

As mentioned by subharb, as from JQuery 3.0 this needs to be changed to:

$('#iframe').on('load', function() {    alert('frame has (re)loaded ');});

https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed


If you have no control over the page and wish to watch for some kind of change then the modern method is to use MutationObserver

An example of its use, watching for the src attribute to change of an iframe

new MutationObserver(function(mutations) {  mutations.some(function(mutation) {    if (mutation.type === 'attributes' && mutation.attributeName === 'src') {      console.log(mutation);      console.log('Old src: ', mutation.oldValue);      console.log('New src: ', mutation.target.src);      return true;    }    return false;  });}).observe(document.body, {  attributes: true,  attributeFilter: ['src'],  attributeOldValue: true,  characterData: false,  characterDataOldValue: false,  childList: false,  subtree: true});setTimeout(function() {  document.getElementsByTagName('iframe')[0].src = 'http://jsfiddle.net/';}, 3000);
<iframe src="http://www.google.com"></iframe>