The hashchange event fires when a window's hash changes (see location.hash).

Syntax

window.onhashchange = funcRef;

or

<body onhashchange="funcRef();">

to overwrite any existing Event-Handlers.

In order to add an event-listener to an existing set of event-handlers use the function "addEventListener"

window.addEventListener("hashchange", funcRef, false);

 

Parameters

funcRef
A reference to a function.

Example

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

The hashchange event

The dispatched hashchange event has the following fields:

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.

Workaround 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 'GlobalEventHandlers' 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support5 Yes3.68105
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4115 ?

Document Tags and Contributors

Last updated by: fscholz,