Horje
HTML onhashchange Event Attribute

Definition and Usage

The onhashchange attribute fires when there has been changes to the anchor part (begins with a '#' symbol) of the current URL.

An example of what an anchor part actually is: Assume that the current URL is
http://www.example.com/test.htm#part2 - The anchor part of this URL would be #part2.

To invoke this event, you can:

  • Change the anchor part by setting the location.hash or location.href property of the Location Object
  • Navigate to the current page with a different bookmark (Use the "back" or "forward" buttons)
  • Click on a link to a bookmark anchor

Browser Support

The numbers in the table specify the first browser version that fully supports the event attribute.

Syntax

< element onhashchange=" script ">

Attribute Values

Value Description
script The script to be run on onhashchange

Technical Details

Supported HTML tags: <body>

Example of HTML onhashchange Event Attribute

Here executes a JavaScript when the anchor part has been changed
index.html
Example: HTML 

<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>Click the button to change the anchor part of the current URL to #part5</p>
<button onclick="changePart()">Try it</button>
<p id="demo"></p>
<script>
// Using the location.hash property to change the anchor part
function changePart() { location.hash = "part5"; let x = "The anchor part is now: " + location.hash; document.getElementById("demo").innerHTML = x;
}
// Alert some text if there has been changes to the anchor part
function myFunction() { alert("The anchor part has changed!");
}
</script>
</body>
</html>

Output should be:

How to add a JavaScript when the anchor part has been changed

Click the button to change the anchor part of the current URL to #part5
index.html
Example: HTML 

<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>Click the button to change the anchor part of the current URL to #part5</p>
<button onclick="changePart()">Try it</button>
<p id="demo"></p>
<script>
// Using the location.hash property to change the anchor part
function changePart() { location.hash = "part5"; let x = "The anchor part is now: " + location.hash; document.getElementById("demo").innerHTML = x;
}
// Alert some text if there has been changes to the anchor part
function myFunction() { alert("The anchor part has changed!");
}
</script>
</body>
</html>

Output should be:

How to add a JavaScript when the anchor part has been changed


html event attributes

Related Articles
HTML onafterprint Event Attribute HTML Window Event Attributes
HTML onbeforeprint Event Attribute HTML Window Event Attributes
HTML onbeforeunload Event Attribute HTML Window Event Attributes
HTML onerror Event Attribute HTML Window Event Attributes
HTML onhashchange Event Attribute HTML Window Event Attributes
HTML onload Event Attribute HTML Window Event Attributes
HTML onoffline Event Attribute HTML Window Event Attributes
HTML ononline Event Attribute HTML Window Event Attributes
HTML onpageshow Event Attribute HTML Window Event Attributes
HTML onresize Event Attribute HTML Window Event Attributes
HTML onunload Event Attribute HTML Window Event Attributes

Single Articles
How to add a JavaScript when the anchor part has been changed HTML Window Event Attributes

Type :
 Develop
Category :
 Web Tutorial
Sub Category :
 HTML Window Event Attributes
Uploaded by :
 Admin 

Read Article

https://horje.com/learn/1434/reference

 

Horje