year of moo

MooTools onhashchange

The MooTools onhashchange.js library fully emulates the HTML5 onhashchange event for all web browsers. The library provides the functionality necessary to import the onhashchange event directly into the MooTools event system.

Last Updated

This page was last updated on March 17th 2011 and was first published on January 31st 2011

* An Update About IE9

IE9 was recently released and the onhashchange event is supported natively by the browser. Internet Explorer has supported the event natively since IE8.

Table of Contents

1. How it Works
2. What’s so special about this plugin?
3. Requirements
4. Browser Support
5. Usage
6. Changing the Hash
7. Demos
8. Issues
9. Download
10. Contact

How it Works

The onhashchange script works by checking to see if the browser supports the window.onhashchange event natively and then attempts to use the native functionality directly. If the browser does not support the event, then the script will setup a timed interval and poll the address bar for any changes. When there is a change, the script will inform the event system and fire the onhashchange event on the window object. For legacy browsers such as IE6 and IE7, the onhashchange script will create a hidden blank iframe and register all the URL changes in there. This is required for the older browsers since IE6 and IE7 DO NOT register hash changes as apart of the browser history, thus when the back button is pressed, the browser will change the page to what it was before any of the hash changes were applied. Therefore, by having a blank iframe, this fully emulates the back and forward button functionality.

What's so special about this plugin?

The MooTools onhashchange plugin provided by yearofmoo differs from other onhashchange plugins since it provides a full solution for browsers that already support the event, browsers that may support it via a timer, and browsers that support it via a timer and a hidden IFrame. Other popular MooTools onhashchange plugins do not provide hidden IFrame support – which is required by IE6 and IE7 to fully emulate the back and forward page changing functionality.

Requirements

MooTools 1.2 or 1.3 (compatibility mode works as well).

Browser Support

Even though the MooTools-onhashchange plugin fully emulates the functionality for all browsers, the following matrix identifies which browsers support the event natively:

Feature	IE6 & IE7	IE8 & IE9	Chrome	Safari	Opera
Supported	Yes	Yes	Yes	Yes	Yes
Method Used	Frames + Timer	Native onhashchange	Native onhashchange (timer for v < 6)	Native onhashchange (timer for v < 5)	Native onhashchange (timer for v < 10.6)
Native onhashchange	No	Yes	Yes (v6+)	Yes (v5+)	Yes (v10.6+)

Usage

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="onhashchange.js"></script>
<script type="text/javascript">
window.addEvent('hashchange',function(newhash) {
	alert('the new hash is: '+newhash);
});
</script>

Changing the Hash

When changing the hash, it is very important that the hash be changed by use of the window.sethash function which is provided by the plugin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="onhashchange.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(newhash) {
	$('some-link').addEvent('click',function(event) {
		event.stop(); //so the link won't go anywhere normally
		window.sethash('#/some-link');
	});
});
</script>

This will ensure that the hash is changed properly for the older browsers as well as all other browsers.

Issues

Despite the plugin being fully supported by all browsers, there are a few issues that cannot be avoided.

1. The onhashchange event for Mozilla browsers will NOT fire when it returns back to a URL that does not contain a hash.
2. IE6 and IE7 use an IFrame work the back/forward button emulation. This does the trick, however, due to the inherit sound effects that are developed into the Internet Explorer browsers, the web page may create a series of clicking sounds which indicate that the frame is changing and the page is changing as well.
3. IE6 and IE7 do not properly allow editing the window.location.hash variable. Therefore it is Strongly Recommended that when changing the hash of the page, to use the window.sethash() method which is provided by the plugin.

Demos

Basic onhashchange event implementation

Click here to view demo

Download

The onhashchange.js files can be found on github.

Contact

Any issues or questions can be posted on the issue tracking page found on github.