Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM HashChangeEvent
The HTML DOM HashChangeEvent is an interface that represents events fired when the hash portion (fragment identifier) of a URL changes. This event occurs when the part of the URL after the # symbol is modified, either programmatically through JavaScript or by user interaction with anchor links.
The HashChangeEvent is commonly used in single-page applications (SPAs) for client-side routing and navigation without full page reloads.
Syntax
Following is the syntax for accessing HashChangeEvent properties −
event.newURL event.oldURL
The event is typically handled using the onhashchange event handler −
window.addEventListener('hashchange', function(event) {
// Handle hash change
});
Properties
The HashChangeEvent interface provides two key properties to track URL hash changes −
| Property | Description |
|---|---|
newURL |
Returns the complete document URL after the hash has been changed |
oldURL |
Returns the complete document URL before the hash was changed |
Basic HashChangeEvent Example
Following example demonstrates how to detect and handle hash changes in the URL −
<!DOCTYPE html>
<html>
<head>
<title>HashChangeEvent Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HashChangeEvent Demo</h2>
<p>Click the button to change the URL hash:</p>
<button onclick="changeHash()">Change Hash</button>
<div id="output" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function changeHash() {
location.hash = "#section" + Math.floor(Math.random() * 100);
}
window.addEventListener('hashchange', function(event) {
document.getElementById('output').innerHTML =
"<strong>Hash Changed!</strong><br>" +
"Old URL: " + event.oldURL + "<br>" +
"New URL: " + event.newURL;
});
</script>
</body>
</html>
When you click the "Change Hash" button, the hash portion of the URL changes, triggering the hashchange event and displaying both the old and new URLs.
Navigation with Hash Links
Following example shows how hash changes work with navigation links −
<!DOCTYPE html>
<html>
<head>
<title>Hash Navigation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Hash-based Navigation</h2>
<nav style="margin-bottom: 20px;">
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<div id="content" style="padding: 15px; border: 1px solid #ccc; min-height: 100px;">
Click a navigation link above
</div>
<script>
window.addEventListener('hashchange', function(event) {
var hash = location.hash.substring(1) || 'home';
var content = document.getElementById('content');
switch(hash) {
case 'home':
content.innerHTML = '<h3>Home Page</h3><p>Welcome to our website!</p>';
break;
case 'about':
content.innerHTML = '<h3>About Us</h3><p>We are a web development company.</p>';
break;
case 'contact':
content.innerHTML = '<h3>Contact</h3><p>Email: info@example.com</p>';
break;
default:
content.innerHTML = '<h3>Page Not Found</h3>';
}
});
// Load initial content
if (location.hash) {
window.dispatchEvent(new Event('hashchange'));
}
</script>
</body>
</html>
This example creates a simple single-page application where clicking navigation links changes the content without reloading the page.
Using addEventListener Method
Instead of the onhashchange attribute, you can use the more flexible addEventListener method −
<!DOCTYPE html>
<html>
<head>
<title>addEventListener HashChange</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Hash Change with addEventListener</h2>
<button onclick="setHash('page1')">Page 1</button>
<button onclick="setHash('page2')">Page 2</button>
<button onclick="setHash('page3')">Page 3</button>
<p id="status" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function setHash(page) {
window.location.hash = page;
}
window.addEventListener('hashchange', function(event) {
var currentHash = window.location.hash.substring(1);
document.getElementById('status').textContent =
'Current page: ' + (currentHash || 'Home');
});
// Set initial status
document.getElementById('status').textContent =
'Current page: ' + (window.location.hash.substring(1) || 'Home');
</script>
</body>
</html>
This approach allows you to add multiple event listeners and provides better control over event handling.
Browser Compatibility
The HashChangeEvent is well-supported across all modern browsers. However, it was introduced in HTML5, so very old browsers (like Internet Explorer 7 and below) do not support it. For legacy browser support, you can use polling techniques to detect hash changes.
Common Use Cases
The HashChangeEvent is commonly used in the following scenarios −
Single Page Applications (SPAs) − For client-side routing without full page refreshes
Bookmarkable states − To make specific application states bookmarkable
Back/Forward navigation − To handle browser history in web applications
Tab navigation − For implementing tabbed interfaces
Conclusion
The HashChangeEvent provides a powerful way to detect and respond to URL hash changes in web applications. It enables smooth client-side navigation and state management without full page reloads. The event object provides both oldURL and newURL properties to track the complete URL before and after the hash change, making it essential for building modern single-page applications.
201 Views
