--- title: hashchange slug: Web/API/Window/hashchange_event translation_of: Web/API/Window/hashchange_event ---

Событие hashchange генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #).

Общая информация

Спецификация
HTML5
Интерфейс
HashChangeEvent
Bubbles
Yes
Cancelable
No
Target
defaultView
Действие по умолчанию
None

Свойства

Property Type Description
target {{readonlyInline}} {{domxref("EventTarget")}} The browsing context (window).
type {{readonlyInline}} {{domxref("DOMString")}} The type of event.
bubbles {{readonlyInline}} {{jsxref("Boolean")}} Whether the event normally bubbles or not.
cancelable {{readonlyInline}} {{jsxref("Boolean")}} Whether the event is cancellable or not.
oldURL {{readonlyInline}} {{jsxref("String")}} The previous URL from which the window was navigated.
newURL {{readonlyInline}} {{jsxref("String")}}  

Совместимость с браузерами

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 {{ CompatGeckoDesktop("1.9.2") }}
Support for the oldURL/newURL attributes added in Firefox 6.		 8.0
oldURL/newURL attributes are not supported.		 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


There are several fallback scripts listed on this page. Basically those scripts check the location.hash at a regular interval. Here is a version that allows only one handler to be bound to the window.onhashchange property:

(function(window) {

  // exit if the browser implements that event
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location,
    oldURL = location.href,
    oldHash = location.hash;

  // check the location hash on a 100ms interval
  setInterval(function() {
    var newURL = location.href,
      newHash = location.hash;

    // if the hash has changed and a handler has been bound...
    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
      // execute the handler
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);

})(window);

Похожие события