Window.onhashchange

  • Revision slug: DOM/window.onhashchange
  • Revision title: window.onhashchange
  • Revision id: 335015
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment CleanUp, id.

Revision Content

{{DomRef}}{{gecko_minversion_header("1.9.2")}}

The hashchange event fires when a window's hash changes (see location.hash).

Syntax

window.onhashchange = funcRef;

or

<body onhashchange="funcRef();">

or

window.addEventListener("hashchange", funcRef, false);

Parameters

funcRef
A reference to a function.

Example

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

The hashchange event

The dispatched hashchange event has the following fields:

Field Type Description
newURL {{gecko_minversion_inline("6.0")}} DOMString The new URL to which the window is navigating.
oldURL {{gecko_minversion_inline("6.0")}} DOMString The previous URL from which the window was navigated.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 {{CompatGeckoDesktop("1.9.2")}} 8.0 10.6 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 {{CompatGeckoMobile("1.9.2")}} 9.0 11.0 5.0

Specification

Revision Source

<div>{{DomRef}}{{gecko_minversion_header("1.9.2")}}</div>

<p>The <strong>hashchange</strong> event fires when a window's hash changes (see <a href="/en-US/docs/DOM/window.location" title="DOM/window.location">location.hash</a>).</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
window.onhashchange = funcRef;
</pre>

<p><strong>or</strong></p>

<pre class="syntaxbox">
&lt;body onhashchange="funcRef();"&gt;
</pre>

<p><strong>or</strong></p>

<pre class="syntaxbox">
window.addEventListener("hashchange", funcRef, false);
</pre>

<h3 id="Parameters" name="Parameters">Parameters</h3>

<dl>
  <dt><code>funcRef</code></dt>
  <dd>A reference to a function.</dd>
</dl>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush:js">
if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;
</pre>

<h2 id="The_hashchange_event" name="The_hashchange_event">The hashchange event</h2>
<p>The dispatched <code>hashchange</code> event has the following fields:</p>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Field</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
      <td><code>DOMString</code></td>
      <td>The new URL to which the window is navigating.</td>
    </tr>
    <tr>
      <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
      <td><code>DOMString</code></td>
      <td>The previous URL from which the window was navigated.</td>
    </tr>
  </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>5.0</td>
        <td>{{CompatGeckoDesktop("1.9.2")}}</td>
        <td>8.0</td>
        <td>10.6</td>
        <td>5.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.2</td>
        <td>{{CompatGeckoMobile("1.9.2")}}</td>
        <td>9.0</td>
        <td>11.0</td>
        <td>5.0</td>
      </tr>
    </tbody>
  </table>
</div>

<ul>
  <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulating the browser history</a>, <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() and history.replaceState()</a> methods, <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a> event.</li>
</ul>

<h2 id="Specification" name="Specification">Specification</h2>
<ul>
  <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5: hashchange event</a></li>
</ul>
Revert to this revision