HTML onhashchange Attribute

Introduction

The onhashchange handler runs JavaScript when the URL hash (fragment identifier) changes — the part after # in the address bar. Unlike onfocus on form fields, this is a window-level event: you assign window.onhashchange or use window.addEventListener("hashchange", …). It fires when users click in-page anchor links, use back/forward on hash URLs, or when script sets location.hash. Common uses include simple tab panels, lightweight “single-page” views, and deep links to a section — all without reloading the page.

What You’ll Learn

Purpose of onhashchange Attribute

The primary purpose of onhashchange is to react when the hash portion of the URL changes so your page can update content without a full reload. For example, clicking <a href="#about"> changes the hash to #about; your handler reads location.hash and shows the About panel.

Hash routing is a beginner-friendly pattern for small apps and tutorials. Larger production apps often use the History API (pushState + popstate) instead, but understanding hashchange is still valuable — many sites and docs use hash links.

📝 Syntax

Assign the handler on window — the event target for hash changes:

<script>
  function handleHashChange() {
    const hash = location.hash.slice(1) || "home";
    document.getElementById("content").textContent = "View: " + hash;
  }

  window.onhashchange = handleHashChange;
  handleHashChange(); // initial render
</script>

Syntax Rules

• Target is window, not individual HTML elements.
• Value is JavaScript executed when the hashchange event fires.
• Triggered by anchor clicks, location.hash = "#foo", and browser back/forward on hash URLs.
• Does not fire when only the query string (?id=1) or path changes without a hash change.
• JavaScript: window.onhashchange = function() { … }.
• Modern alternative: window.addEventListener("hashchange", handler).

💎 Values

The onhashchange property accepts a function (or function reference):

• window.onhashchange = handleHashChange — Named function reference.
• window.onhashchange = function() { … } — Inline anonymous function.
• Preferred: window.addEventListener("hashchange", handler).

window.addEventListener("hashchange", () => {
  const section = location.hash.slice(1) || "home";
  console.log("Hash is now:", section);
  renderSection(section);
});

// Also run on first load:
renderSection(location.hash.slice(1) || "home");

Applicable Elements

hashchange vs popstate vs onfocus

Examples Gallery

Swap content from the URL hash, register with addEventListener, and handle the initial load.

<h1>Dynamic Content Based on Hash</h1>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>
<div id="content"></div>

<script>
  function handleHashChange() {
    var hash = location.hash.substring(1) || "home";
    document.getElementById("content").textContent =
      "Content based on hash: " + hash;
  }
  window.onhashchange = handleHashChange;
  handleHashChange();
</script>

<script>
  window.addEventListener("hashchange", function () {
    console.log("Hash changed to:", location.hash);
  });

  // Or property form:
  window.onhashchange = function () { /* … */ };
</script>

function renderFromHash() {
  const id = location.hash.slice(1) || "home";
  document.querySelectorAll("[data-view]").forEach(el => {
    el.hidden = el.dataset.view !== id;
  });
}

window.addEventListener("hashchange", renderFromHash);
renderFromHash(); // run once for URL like page.html#about

♿ Accessibility

• Update the document title — When hash routing changes the main view, update document.title so screen reader users know the page context changed.
• Move focus intentionally — After swapping content, move focus to the new heading or main region with tabindex="-1" if appropriate.
• Don’t rely on hash alone — Critical state should still be available without JavaScript; hash links should map to real content.
• Use semantic headings — Each “view” should have a proper <h1> or <h2> for structure.
• Announce changes — Consider aria-live regions when dynamic panels update.

💡 Best Practices