The HashChangeEvent in HTML DOM is an interface between the events that are triggered when the hash of the URL has been changed. The anchor part of the URL follows the # symbol.
Supported Tags
Properties/Methods:
- newURL: This property is used to return the URL of the document after the fragment identifier has been changed.
Syntax:
event.newURL
- oldURL: This property is used to return the URL of the document before the hash (anchor part) changes.
Syntax:
event.oldURL
onhashchange Event: This property occurred when there have been changes to the hash of the current URL.
Syntax:
<element onhashchange = "script">
Example 1: In this example, we will use the DOM HashChangeEvent.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM HashChangeEvent
</title>
</head>
<body onhashchange="GFG(event)">
<h3>
Click on the button to see the change in URL
</h3>
<button onclick="geeks()">
Change
</button>
<p id="sudo"></p>
<script>
// Use location.hash property to
// change the anchor part
function geeks() {
location.hash = "#GeeksforGeeks";
}
function GFG() {
document.getElementById("sudo").innerHTML
= "<h3>Previous URL: " + event.oldURL
+ "<h3>New URL: " + event.newURL;
}
</script>
</body>
</html>
|
Output:
Example 2: In this example, we will use the DOM HashChangeEvent.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM HashChangeEvent
</title>
</head>
<body onhashchange="GFG()">
<h4>Click the button</h4>
<button onclick="geeks()">
Click Here!
</button>
<p id="sudo"></p>
<script>
function geeks() {
location.hash = "#GeeksforGeeks";
let x = location.hash;
document.getElementById("sudo").innerHTML
= "The new anchor part is: " + x;
}
function GFG() {
alert("The hash has been changed!");
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM HashChangeEvent property are listed below:
- Google Chrome 5.0
- Internet Explorer 8.0
- Firefox 3.6
- Safari 5.0
- Opera 10.6
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
14 Jun, 2023
Like Article
Save Article