JavaScript: Detect source change from iframe

Question

This might be a long shot but I was wondering if anyone knew if there was a way to detect (with Javascript or JQuery) if an iframes source has changed - ie: if a user changes the page within an iframe.

I want to write something like:

if (iframesource == http://www.site.com/urlA){
do something
}

else if (iframesource == http://www.site.com/urlB){
do something different
}

I already know the src attribute for the iframe element (<iframe src="http://www.site.com">) does not change if the page changes within the site so using JQuery to detect the attribute is out.

would anyone know if this is possible? Any advice would be greatly appreciated! Thanks

score 4 · Accepted Answer · answered Jul 05 '12 at 00:10

4

OK basically after loads of research I have found out that this only works if the iframe is pointing to a URL within your existing site or server. If you are pointing to another site (say YouTube) it will not work.

The best way to transfer information from one site to another is still with JSON.

answered Jul 05 '12 at 00:10

MeltingDog

14,310
43
165
295

sites should be able to allow this kind of detection.. so many possibilities – coiso Apr 01 '14 at 23:30

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

You will need to build a javascript function that does a few things:

onload.
obtains src value by element id.
passes this into temp_object
enter recursive function with a set_timeout(100ms) say.
compare temp_object to object.
if true, do something, temp_object = object.

@EDIT -----> anti-sop anti-xss

<html>
    <head>
        <script type="text/javascript">
                function GetIFrameUrl()
                {
                        alert('url = ' + document.frames['frame1'].location.href);
                }
        </script>
    </head>
    <body>
        <a href="#" onclick="GetIFrameUrl();">Find the iFrame URL</a>
        <iframe name="frame1" src="http://www.google.com" width="100%" height="400"></iframe>
    </body>
</html>

Getting the current src of an Iframe using JQuery

edited May 23 '17 at 12:13

Community

1
1

answered Jul 04 '12 at 04:28

Dan Kanze

18,485
28
81
134

Thanks Dan but I think the src value remains static with iframes, regardless if the page within them changes. Dont suppose theres anyway to get jquery to get an element from within the iframe is there? Like the tag? – MeltingDog Jul 04 '12 at 04:32
Actually there is. jQuery can get any content inside an iFrame. Listening for changes to attributes like src is also possible with mutation events. – adeneo Jul 04 '12 at 04:37
yea sorry mate i didnt realize SOP had that locked down too. im looking up some other stuff on this im interested as well. see edits. – Dan Kanze Jul 04 '12 at 04:44

JavaScript: Detect source change from iframe

2 Answers2

@EDIT -----> anti-sop anti-xss