Window.onhashchange

  • Revision slug: DOM/window.onhashchange
  • Revision title: window.onhashchange
  • Revision id: 30984
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment updated for bug 628069; 52 words added, 76 words removed

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 is 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.

Other browsers

Internet Explorer 8 also supports the hashchange event.  See this page for details.

See Also

Specification

Revision Source

<p>{{ DomRef() }}</p>
<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>The <strong>hashchange</strong> event fires when a window's hash changes (see <a href="/en/DOM/window.location" title="en/DOM/window.location">location.hash</a>).<span style="font-weight: bold;"><em><br>
</em></span></p>
<h3 class="editable"><span>Syntax </span></h3>
<pre>window.onhashchange = funcRef;
</pre>
<p><strong>or</strong></p>
<pre>&lt;body onhashchange="funcRef();"&gt;
</pre>
<p><strong>or</strong></p>
<pre>window.addEventListener("hashchange", funcRef, false);
</pre>
<h3 class="editable"><span>Parameters </span></h3>
<ul> <li><code>funcRef</code> is a reference to a function.</li>
</ul>
<h3 class="editable"><span>Example</span></h3>
<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>
<h3 class="editable">The hashchange event</h3>
<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>
<h3 class="editable">Other browsers</h3>
<p>Internet Explorer 8 also supports the <code>hashchange</code> event.  See <a class="external" href="http://msdn.microsoft.com/en-us/library/cc288209(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/cc288209(VS.85).aspx">this page</a> for details.</p>
<h3 class="editable"><span>See Also</span></h3>
<ul> <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a>, <a href="/en/DOM/window.history" title="en/DOM/window.history">history.pushState() and history.replaceState()</a> methods, <a href="/en/DOM/window.onpopstate" title="en/DOM/window.onpopstate">popstate</a> event.</li>
</ul>
<h3 class="editable"><span>Specification</span></h3>
<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