Bringing HTML 5 features to every browser, today
/ Thursday, July 16, 2009
Just like Bruce Lawson on sitepoint.com says: «Yes, You Can Use HTML 5 Today!» Besides new HTML elements, HTML 5 brings lots of new features to JavaScript and the DOM-API as well. One of these new features is the hashchange event.
The hashchange event
Whenever you follow an internal link on a website, the portion of the URL behind the # in the location bar and the browser’s history is updated. This enables easy browsing within large documents. With AJAX-enabled websites, changing the location hash was also used to store a certain navigation step with the same page, without being directly related to page internal links. This technique brings history support and bookmarkability - two important features of a browser - to these sites. The DOM-API implemented in current browsers simply does not allow for capturing changes of the location hash directly.
HTML 5 will overcome this shortcoming. Here, every time the location hash changes (either by following an internal link, using the Back button, a bookmark, or by changing the hash in the location bar) an event will be triggered that can be listened to by any JavaScript function.
Current state
As of today, only Internet Explorer 8 supports the new event. In all other browser this behavior needs to be simulated. This is generally done by constantly polling the state of the location hash and comparing stored and current values. Managing the polling function and triggering the right actions may become tedious, especially when multiple actions need to be run.
jQuery.observeHashChange plugin
In order to make use of the new functionality in HTML 5 and Internet Explorer 8 while still supporting older browsers, we compiled a jQuery plugin that gives you a cross platform, jQuery-like API. The API always tries to use the best possible function, so when other browsers start to support for the hashchange event, your application will benefit automagically.
This page provides a live example. Besides our new plugin, the site features new HTML 5 elements to structure the content. It already works in all major browsers, today. (Please note, that the layout won’t work in Internet Explorer 6, but this is related to missing CSS features.)
As usual, we have released the plugin on GitHub page.