Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM HashChangeEvent

  • Last Updated : 30 Jul, 2021

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 # symbol.
Supported Tags 

  • <body>

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 returns the URL of the document before the hash (anchor part) change. 
    Syntax: 
     
event.oldURL

onhashchange Event: This property occurred when there has been changes to the hash of the current URL. Syntax: 

<element onhashchange = "script">

Example 1: 
 

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: 
Before Click on the button:
 



After Click on the button: 
 

Example 2: 
 

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";
            var 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: 
Before Click on the button: 
 

After Click on the button: 
 

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

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :