[Javascript] capturing changes to the fragment identifier

[John Zabroski]

For those who don't know, the fragment identifier is everything after the pound symbol (#) aka the hash symbol.  It is intended to be used as a way to navigate within a document and bookmark that section of a document.  Gmail uses it to determine what to load into iframes, using iframes as a model for recording 'hard state' and 'soft state' for the application.  My use case is similar to Gmail.

The caveat to the fragment identifier is that the DOM must know about it *a priori* in order to get the browser's baked in navigation and bookmark state-process schemes.  For rich internet applications that function as Active Documents, there is no way for the browser to perform deductive reasoning about the document's navigation structure or what constitutes a bookmark (a plug-in instantiated through the object element is by default opaque).  Everything is determined on-the-fly, in response to client-side requests.  These determinations can be persisted, either through isolated storage on the client or through a commit executed by sending the state to the server for storage in the network.  However, a better model is to make use of HTTP and record state in the URI.  Gmail is a pretty tame case, since its navigation structure is discrete ('#inbox', '#starred', etc.).

Currently, there does not appear to be a cross-browser compatible method for handling changes to the fragment identifier as an event.  IE8 is planning to support onHashChange as an event handler, but it does not appear to be a w3c standard.

Such an event handler would be ideal, since it would push all updates to hard and soft state into a single point: a resource.

How can I do this cross-browser?  FF1.5+, IE7+, and Safari is pretty much the bare minimum support required version-wise, but I'd prefer to support it feature-wise and deterministically figure out what browsers can even do this.