HTML | DOM HashChangeEvent

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.

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
Before Click on the button:

After Click on the button:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                      

chevron_right


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


My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.