The WindowEventHandlers.onhashchange
property of the WindowEventHandlers
mixin is the EventHandler
for processing hashchange
events.
The hashchange
event fires when a window's hash changes (see Window.location
and HTMLHyperlinkElementUtils.hash
).
Syntax
Using an event handler:
window.onhashchange = funcRef;
Using an HTML event handler:
<body onhashchange="funcRef();">
Using an event listener:
To add an event listener, use addEventListener()
:
window.addEventListener("hashchange", funcRef, false);
Parameters
funcRef
- A reference to a function.
Examples
Using an event handler
This example uses an event handler (window.onhashchange
) to check the new hash value whenever it changes. If it equals #cool-feature
, the script logs a message to the console.
function locationHashChanged() { if (location.hash === '#cool-feature') { console.log("You're visiting a cool feature!"); } } window.onhashchange = locationHashChanged;
Using an event listener
This example uses an event listener to log a notification whenever the hash has changed.
function hashHandler() { console.log('The hash has changed!'); } window.addEventListener('hashchange', hashHandler, false);
Overriding the hash
This function sets a new hash dynamically, setting it randomly to one of two values.
function changeHash() { location.hash = (Math.random() > 0.5) ? 'location1' : 'location2'; }
The hashchange event
The dispatched hashchange
event has the following properties:
Field | Type | Description |
newURL |
DOMString |
The new URL to which the window is navigating. |
oldURL |
DOMString |
The previous URL from which the window was navigated. |
Polyfill for event.newURL and event.oldURL
// Let this snippet run before your hashchange event binding code if (!window.HashChangeEvent)(function(){ var lastURL = document.URL; window.addEventListener("hashchange", function(event){ Object.defineProperty(event, "oldURL", {enumerable:true,configurable:true,value:lastURL}); Object.defineProperty(event, "newURL", {enumerable:true,configurable:true,value:document.URL}); lastURL = document.URL; }); }());
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onhashchange' in that specification. |
Living Standard | |
HTML 5.1 The definition of 'GlobalEventHandlers' in that specification. |
Recommendation | |
HTML5 The definition of 'GlobalEventHandlers' in that specification. |
Recommendation |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onhashchange | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 3.6 | IE Full support 8 | Opera Full support 10 | Safari Full support 5 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 5 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support