HTML onhashchange Attribute

Posted in HTML Tutorial

Updated on Jan 28, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The onhashchange attribute in HTML provides a mechanism for executing JavaScript code when there is a change in the URL fragment identifier, commonly known as the hash.

This attribute is particularly useful for creating dynamic and responsive web applications that need to respond to changes in the URL without requiring a page reload.

🎯 Purpose of onhashchange

The primary purpose of the onhashchange attribute is to enable developers to define a JavaScript function that should be executed whenever there is a change in the URL's fragment identifier.

This allows for the creation of interactive and single-page applications that can update their content based on changes in the hash portion of the URL.

💎 Values

The onhashchange attribute accepts a JavaScript function as its value.

This function is executed whenever there is a change in the URL's fragment identifier.

It provides developers with the flexibility to define custom actions based on the specific requirements of their applications.

📄 Example

Let's look at a simple example of how to use the onhashchange attribute in an HTML document:

onhashchange.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hash Change Example</title>
</head>
<body>

  <h1>Dynamic Content Based on Hash</h1>
  <div id="content"></div>

  <script>
    // Define the function to be executed on hash change
    function handleHashChange() {
      var hash = window.location.hash.substring(1); // Get the hash without the '#'
      document.getElementById("content").innerHTML = "Content based on hash: " + hash;
    }

    // Attach the function to the onhashchange event
    window.onhashchange = handleHashChange;

    // Initial content based on the current hash
    handleHashChange();
  </script>

</body>
</html>

🧠 How it Works

In this example, the onhashchange attribute is utilized to call the handleHashChange function whenever there is a change in the URL's fragment identifier. The function updates the content of an HTML element based on the current hash.

🔄 Dynamic Values with JavaScript

Similar to other HTML attributes, the onhashchange attribute can be set or modified dynamically using JavaScript.

This allows developers to adapt the behavior of the event handler based on specific conditions or user interactions. Here's a brief example:

onhashchange.html

Copied

<script>
  // Dynamically set the onhashchange attribute
  window.onhashchange = function() {
    // Custom logic based on the hash change
    console.log("Hash changed dynamically!");
  };
</script>

🧠 How it Works

In this script, the onhashchange attribute is dynamically set to an anonymous function that logs a message to the console. This provides a way to customize the behavior of the event handler dynamically.

🏆 Best Practices

Utilize the onhashchange attribute when building single-page applications or dynamic content that responds to changes in the URL hash.
Ensure that the assigned JavaScript function handles hash changes appropriately and efficiently.
Test the functionality across different browsers to ensure consistent behavior.

🎉 Conclusion

The onhashchange attribute is a valuable tool for creating dynamic and interactive web applications that respond to changes in the URL's fragment identifier.

By leveraging this attribute, developers can enhance the user experience and build more responsive web applications.