Horje
What is 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
What is HTML onafterprint Event Attribute Window Event Attributes
What is HTML onbeforeprint Event Attribute Window Event Attributes
What is HTML onbeforeunload Event Attribute Window Event Attributes
What is HTML onerror Event Attribute Window Event Attributes
What is HTML onhashchange Event Attribute Window Event Attributes
What is HTML onload Event Attribute Window Event Attributes
What is HTML onoffline Event Attribute Window Event Attributes
What is HTML ononline Event Attribute Window Event Attributes
What is HTML onpageshow Event Attribute Window Event Attributes
What is HTML onresize Event Attribute Window Event Attributes

Single Articles
How to add a JavaScript when the anchor part has been changedWindow Event Attributes

Read Full:
Window Event Attributes
Type:
Develop
Category:
Web Tutorial
Sub Category:
Window Event Attributes
Uploaded by:
Admin
Views:
14


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