year of moo

Current state of onhashchange & HTML5 history

How widely supported are these URL changing techniques in modern browsers?

The onhashchange event is a popular event and has been widely looked into by yearofmoo. The MooTools-onhashchange plugin offered by yearofmoo takes care of this task effectively. The onhashchange event can be used in combination with a hash-prefixed URL token, known as a hashbang, to effectively inform search engines of indexed ajax content.

The HTML5 history API is only offered by modern browsers and offers more features than the onhashchange event. The only issue is that not all browsers fully support it yet since it is a new HTML5 JavaScript API. In addition, unlike with the onhashchange event, there is no way to emulate or hack non-supporting browsers to offer popstate support.

But how widely supported are the two features?

Last Updated

This page was last updated on Oct 24th 2011 and was first published on Oct 24th 2011

The onhashchange event vs the History API

HTML5 history is by far more extensive, user-friendly and profound than the onhashchange event (in regards to dynamic URL changing). The page fragment (or hash tag) of a URL was designed for in page anchoring and not for page to page addressing (which is what the history API does). So how do each of these two compare? Here are some comparsions:

Browser Support

The onhashchange event is widely supported by all browsers (other than IE6 and IE7). As of now, no extra code is required to handle the event for modern browsers. IE6 and IE7 are so far phased out now that they should not be supported for new web apps … so why offer the onhashchange event for them? The history API, however, is not yet fully supported by all browsers until IE10 fully hits the scene.

Here is a complete matrix of which browsers support which:

What should I use?

You should feel comfortable to use both, but be sure to favour use of the history API over to the onhashchange event due to the extra features that are provided.

Any Plugins?

A useful plugin on the popstate-hashing.js plugin offered by yearofmoo. It basically sets up one event to handle the URL changing via the history API first and then via the onhashchange event second. This way, the browser and the developer need not to worry about any extra cases of what todo when changing the URL of a web page dynamically. Click here to view the popstatehashing plugin

History API + onhashchange

The nice thing is that all of the browsers that support the history API support the onhashchange event. So in a few years time, when IE10+ is very common and other IE browsers have been phased out, developers can use both the History API and the onhashchange event together for some truly awesome web page effects. Imagine if you have your top level page changes triggered by a popstate event (using the History API) and then lower level changes, such as pagination and optional, expanding areas triggered by a hash tag change (using the onhashchange event). This way, all areas of a website can be accessed directly from a URL, but your website can be better tailored to make use of more specific events with less code.

Some Links

Thanks guys! :]

• http://caniuse.com/#search=history
• http://ie.microsoft.com/testdrive/Info/ReleaseNotes/Default.html

  No Comments »