This is just a little utility I wrote a couple years ago and pulled out of the closet recently for a project, so I thought it was a good time to do something with it. This is like many other history trackers and similar, but has a few extra features.
hashtrack.js does depend on jQuery (any version will do, really) but this will probably change, because the only thing it uses is $.each() and this can be done in vanilla javascript, which would be useful to people who aren't using jQuery. If you want to use this outside jQuery, go ahead and fork hashtrack.js at GitHub and I'll merge it in with a big "Thank, You!"
The main difference between this and previous history libraries is the treating of the hash like a dynamic querystring.
That is, a URL like http://awesome-news.com/#page=3 would be used, where links to other pages would change the hash, the portion after the #, which doesn't load any new page. The hashtrack.js library allows you to register callbacks, either on every hash change or on specific variables, to respond to those changes. This works in a cross-browser fashion.
hashtrack.js has been tested with:
| Firefox 3.0 | 3.5 | Internet Explorer 7 | 8.0 | Safari 4 |
| Yes! | Yep! | Yes! | Yep! | Yes! |
hashtrack
The global hashtrack object maintains all state and API functions
hashtrack.onhashchange(callback(hash))
Register a callback to be called with the current location hash every time it changes.
hashtrack.onhashvarchange(varname, callback(value))
Register a callback to the called with the current value of a "hash variable", which is parsed out of the location hash similar to how a querystring is parsed.
hashtrack.onhashvarchange("background", function (value) {
$('body').css('background', value);
}, true);
This example changes the page's background according to a parsed variable "background" from the hash. The optional true passed as the last parameter triggers the callback with any current value, which is useful to reflect hash variables on page load. Try these links to demonstrate it:
hashtrack.getVar(name)
Returns the current value of the hash variable name as parsed.
hashtrack.setVar(name, value)
Changes a named variable in the hash string, leaving the rest of it unchanged.
These examples call hashtrack.setVar() when the field values change, which you can see reflected in the URL bar above.
hashtrack.setFrequency(milliseconds)
Changes the frequency in which the hash is polled on browsers that do not support the hashchange event. Default = 100
hashtrack.init()
Automatically called when the page is ready and sets up the hashtrack environment and polling. Can be called again if hashtracking is paused.
hashtrack.stop()
Stops hashtracking until it is started again via hashtrack.init().