HTML onhashchange Event Attribute - Window Event Attributes

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:

html event attributes

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

Single Articles

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

Window Event Attributes

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

Reffered: https://www.w3schools.com/tags/ev_onhashchange.asp