How can I detect an address bar change with JavaScript?

Question

I have a Ajax heavy application that may have a URL such as

http://example.com/myApp/#page=1

When a user manipulates the site, the address bar can change to something like

http://example.com/myApp/#page=5

without reloading the page.

My problem is the following sequence:

1. A user bookmarks the first URL.
2. The user manipulates the application such that the second URL is the current state.
3. The user clicks on the bookmark created in step 1.
4. The URL in the address bar changes from http://example.com/myApp/#page=5 to http://example.com/myApp/#page=1, but I don't know of a way to detect the change happened.

If I detect a change some JavaScript would act on it.

• Vinko Vrsalovic: I'm curious, why was the app designed like this? I can't see any actual need for the URL change.
• JoshNaro: It works just like a query string, but doesn't cause the browser to reload the page. This is was done, so that the payload of the client doesn't have to be retrieved and loaded every time a page is changed. The payload is not easily cached, demands a substantial JavaScript initialization time, and would not provide the client with a seemless experience.

Answer 1

HTML5 introduces a hashchange event which allows you to register for notifications of url hash changes without polling for them with a timer.

It it supported by all major browsers (Firefox 3.6, IE8, Chrome, other Webkit-based browsers), but I'd still highly suggest to use a library which handles the event for you - i.e. by using a timer in browsers not supporting the HTML5 event and using the event otherwise.

window.onhashchange = function() {
 alert("hashtag changed");
};

For further information on the event, see https://developer.mozilla.org/en/dom/window.onhashchange and http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

• JoshNaro: Now if only those IE6/7 users would all upgrade to >=IE8. Thanks for the update.
• JJschk: I started using the jqouery plugin of the hashChange event - everything runs smoothly :D

Answer 2

check the current address periodically using setTimeout/interval:

 var oldLocation = location.href;
 setInterval(function() {
 if(location.href != oldLocation) {
 // do your action
 oldLocation = location.href
 }
 }, 1000); // check every second

• Jonathan Feinberg: This answer is correct. You should also consider using something like the YUI History manager componentry, which does it for you, in a cross-browser way.
• ZippyV: If I type in a new address and press Enter there is no way the current page will be able to stop that.
• JoshNaro: Yeah, I was hoping there was a hidden event or something. Using an interval just doesn't seem "right" to me somehow. Thanks.
• user2398029: This is ugly, but apparently the only way: stackoverflow.com/questions/3522090/…
• ojchase: @MikeNakis The premise of the question is that your scenario isn't occurring. The page is being changed in some dynamic way with the URL changing but without ever being torn down.

Answer 3

You should extend the location object to expose an event that you can bind to.

ie:

window.location.prototype.changed = function(e){};
(function() //create a scope so 'location' is not global
{
 var location = window.location.href;
 setInterval(function()
 {
 if(location != window.location.href)
 {
 location = window.location.href;
 window.location.changed(location);
 }
 }, 1000);
})();
window.location.changed = function(e)
{
 console.log(e);//outputs http://newhref.com
 //this is fired when the window changes location
}

• jmd: Actually, as it uses a timer, it does not really bring any enhancement wrt what the selected solution does
• Trendy: It's not the best idea to extend a global object that already exposes a value you can watch.

Answer 4

SWFaddress is an excellent library for these types of things.