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 StandardThe definition of 'onhashchange' in that specification. | Living Standard | |
HTML 5.1The definition of 'GlobalEventHandlers' in that specification. | Recommendation | |
HTML5The definition of 'GlobalEventHandlers' in that specification. | Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
See also
hashchange
event- Manipulating the browser history
history.pushState()
andhistory.replaceState()
methodsWindowEventHandlers.onpopstate
HTMLHyperlinkElementUtils.hash
WindowEventHandlers.onhashchange by Mozilla Contributors is licensed under CC-BY-SA 2.5.