Introduction
To detect the browser location hash changes in Javascript, there’s a web API event called hashchange. Which we can rely on to detect the change in the location hash.
How to use it?
There are two options to listen to the hashchange event:
- Attach the event (
hashchange) to theaddEventListenerfunction, through any of the supported interfaces - Call the event (
onhashchange) on any of the supported interfaces.
Supported Interfaces:
Examples
1- Using addEventListener
To detect the hash change using the addEventListener method, we’re going to attach the event to it through the Window interface. As shown in the following example:
window.addEventListener('hashchange', function (event) {
console.log(event);
alert('Hash change detected: ' + event.newURL);
});To be able to test it, we need to add a button that will update the browser location value once the user clicked on it, as shown below:
<button onclick="return changeLocationHash();">Change location hash</button>
<script>
function changeLocationHash() {
window.location = window.location + '#hash';
}
</script>Then once the browser location value is updated, the hashchange event handler will be executed, and we should be able to see the alert message.
Putting it together:
<body>
<button onclick="return changeLocationHash();">Change location hash</button>
<script>
function changeLocationHash() {
window.location = window.location + '#hash';
}
// Option 1
window.addEventListener('hashchange', function (event) {
console.log(event);
alert('Hash change detected: ' + event.newURL);
});
</script>
</body>2- Calling the event onhashchange
The 2nd option can be done, by calling the event onhashchange directly on any of the supported interfaces.
For example:
<body>
<button onclick="return changeLocationHash();">Change location hash</button>
<script>
function changeLocationHash() {
window.location = window.location + '#hash2';
}
// Option 2
window.onhashchange = function (event) {
console.log(event);
alert('Hash change detected: ' + event.newURL);
};
</script>
</body>As shown above in the example, we’ve attached the onhashchange directly to the Window interface, and assigned it a new function implementation, which will show an alert once the browser location hash changed.
Running the above code in the browser would results in the following:
Full source code:
That’s it for How to detect location hash changes in Javascript.
Photo from Unslpash.
