iFrame src change event detection?

javascript jquery iframe onload
Matrym picture Matrym · Mar 11, 2010 · Viewed 254.6k times · Source

Assuming I have no control over the content in the iframe, is there any way that I can detect a src change in it via the parent page? Some sort of onload maybe?

My last resort is to do a 1 second interval test if the iframe src is the same as it was before, but doing this hacky solution would suck.

I'm using the jQuery library if it helps.

Answer

Daniel Vassallo picture Daniel Vassallo · Mar 11, 2010

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>

Related questions

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

I am loading an <iframe> in my HTML page and trying to access the elements within it using Javascript, but when I try to execute my code, I get the following error: SecurityError: Blocked a frame with origin "…

Read More
jQuery/JavaScript: accessing contents of an iframe

I would like to manipulate the HTML inside an iframe using jQuery. I thought I'd be able to do this by setting the context of the jQuery function to be the document of the iframe, something like: $(function(){ //document ready $(…

Read More
make iframe height dynamic based on content inside- JQUERY/Javascript

I am loading an aspx web page in an iframe. The content in the Iframe can be of more height than the iframe's height. The iframe should not have scroll bars. I have a wrapper div tag inside the iframe …

Read More