html tutorial - onhashchange Attribute in HTML - html5 - html code - html form



Onhashchange attribute in html

Learn html - html tutorial - Onhashchange attribute in html - html examples - html programs

  • The onhashchange attribute triggers when there has been changes to the anchor part (starts with a '#' symbol) of the present URL.
  • This event can invoke
    • Navigate to the present page with a different bookmark
    • Modify the anchor part by setting the location.href property or location.hash of the Location Object
    • Click on a link to a bookmark anchor
  • The onhashchange attribute is a section of the Event Attributes.

Syntax for onhashchange attribute in HTML:

<body onhashchange="script">

Difference between HTML 4.01 and HTML 5 for onhashchange Attribute:

HTML 4.01

  • The onhashchange attribute has not been defined.

HTML 5

  • The onhashchange attribute is added newly.

Applies To:

Elements Attribute
<body> onhashchange

onhashchange Attribute Value:

Value Description
script The script can run on onhashchange

Sample Coding for onhashchange Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy onhashchange attribute</title>
    </head>
    <body onhashchange="onHashChange()">
        <p id="tutorial">Wikitechy Tutorials learn code in wikitechy</p>
        <a href="#tutorial">Click here to check onhashchange attribute</a>
        <script>
            function onHashChange() 
            {
             alert ("onhashchange called!");
            }
        </script>
    </body>
</html>

Code Explanation for onhashchange Attribute in HTML:

onhashchange Attribute Code Explanation

  1. The onhashchange attribute is used to call onHashChange() JavaScript function when anchor part of the URL is change with # symbol.
  2. <a href=”#tutorial”> is used to change the anchor part of the URL.
  3. The JavaScript function onHashChange is used to display an alert message.

Output for onhashchange Attribute in HTML:

onhashchange Attribute Output

  1. The output is displayed with the link “Click here to check onhashchange attribute”
onhashchange Attribute Output
  1. When the user clicks the link, then the URL has been changed.
  2. The anchor part of the URL is changed into #tutorial.
  3. When the anchor part is changed, the alert box is open with the message “onhashchange called!”

Browser Support for onhashchange Attribute in HTML:

Yes Yes Yes Yes Yes

Related Searches to onhashchange attribute in html