Justin Lebar's intern brownbag

September 10, 2009

Hashchange event

A URL's hash is the part after the #. For instance, the hash of http://bugzilla.com/bug?id=123#comment-4 is #comment-4. When a page's location changes, we fire a hashchange event if the new location differs from the old location only in the hash.

Example 1 
<html>
  <body onhashchange="alert('Got a hashchange.');">
    <a href='#foo'>Click me</a>
  </body>
</html>
Clicking on the link will trigger a hashchange.
Example 2
  1. Start at http://bugzilla.com/bug?id=123
  2. Click a link to http://bugzailla.com/bug?id=456#comment-1
A hashchange will not fire. Although the hash changed, the rest of the URL didn't remain the same.
Example 3
  1. Start at http://bugzilla.com/bug?id=123
  2. Click a link to http://bugzilla.com/bug?id=123#comment-1
  3. Go back
A hashchange will fire at steps 2 and 3.

Without the hashchange event, it's difficult for pages to detect when the URL's hash changed because the user clicked the back/forward button. Pages such as Gmail, Pandora, and Facebook all use the hash for navigation, so being able to easily detect when the hash changes is important to them.

IE8 already supports the hashchange event, and hashchange made it into the Firefox 3.6 branch. For more information, see https://developer.mozilla.org/index.php?title=en/DOM/window.onhashchange.

PushState and ReplaceState

PushState lets pages add entries to the history through Javascript. This is best illustrated with an example.

Example 4

Suppose http://mozilla.org/foo.html executes the following Javascript: 

var stateObj = {id: 2};
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html, or even check that bar.html exists.

Suppose now that the user navigates to http://google.com, then clicks back. At this point, the URL bar will display http://mozilla.org/bar.html, and the page will get a PopState event whose state object contains a copy of stateObj. The page itself will look like foo.html, although the page might modify its contents during the PopState event.

If we click back again, the URL will change to http://mozilla.org/foo.html, and the document will get another PopState event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the PopState event.

We also added a ReplaceState function (not yet specified in HTML5) which works exactly like PushState, except that it modifies the current URL and state object instead of creating a new history entry.

PushState and ReplaceState can be used in myriad ways. Here are a few examples: