Telling when an iframe is on a new URL

Question

Hi, I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.

It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.

I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.

Thanks for the help!

Answer 1

Instead, can you add code to the frame's contents to have it raise an event to the container frame?

In IE, the "OnReadyStateChanged" event might give you what you want.

Answer 2

This will be difficult to do because it is considered xss and most browsers block that.

There are most likely some workarounds involving AJAX.

Answer 3

Hey Cyclone.

First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)

If that is the case, you can do the following in the iframed.html page:

<script type="text/javascript">
window.onload = function() {
    var links = document.getElementsByTagName('a');
    for (var i=0, link; link = links[i]; i++) {
     link.onclick = function() {
      window.parent.location.href = '#' + encodeURIComponent(this.href);
     }
    }
}
</script>

This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)

Obviously, you would have to have a script like this on every page that is to appear inside the iframe.

Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:

window.onload = function() {
    var url = window.location.hash.substr(1);
    if (url) {
     document.getElementById('iframe').src = url;
    }
}

I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!

Answer 4

You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)