WindowEventHandlers.onhashchange

WindowEventHandlers ミックスインの onhashchange プロパティは、hashchange イベントを処理するための EventHandler です。

hashchange イベントは、ウィンドウのハッシュが変更されると発生します（Window.location および HTMLHyperlinkElementUtils.hash を参照）。

構文

イベントハンドラの使用

window.onhashchange = funcRef;

HTML イベントハンドラの使用

<body onhashchange="funcRef();">

イベントリスナーの使用

イベントリスナーを追加するには、addEventListener() を使用します。

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

パラメーター

funcRef
 関数への参照。

例

イベントハンドラの使用

この例では、イベントハンドラ（window.onhashchange）を使用して、新しいハッシュ値が変更されるたびにチェックします。 それが #cool-feature と等しい場合、スクリプトはコンソールにメッセージを記録します。

function locationHashChanged() {
  if (location.hash === '#cool-feature') {
    console.log("あなたはクールな機能を訪れています！");
  }
}

window.onhashchange = locationHashChanged;

イベントリスナーの使用

この例では、イベントリスナーを使用して、ハッシュが変更されるたびに通知を記録します。

function hashHandler() {
  console.log('ハッシュが変更されました！');
}

window.addEventListener('hashchange', hashHandler, false);

ハッシュのオーバーライド

この関数は、新しいハッシュを動的に設定し、2つの値のいずれかにランダムに設定します。

function changeHash() {
  location.hash = (Math.random() > 0.5) ? 'location1' : 'location2';
}

hashchange イベント

送出された hashchange イベントには、次のプロパティがあります。

フィールド 型 説明
newURL DOMString ウィンドウがナビゲートされた新しい URL。
oldURL DOMString ウィンドウがナビゲートされる前の URL。

event.newURL および event.oldURL のポリフィル

// hashchange イベントを登録するコードの前にこのスニペットを実行してください
if (!window.HashChangeEvent)(function(){
  var lastURL = document.URL;
  window.addEventListener("hashchange", function(event){
    Object.defineProperty(event, "oldURL", {enumerable:true,configurable:true,value:lastURL});
    Object.defineProperty(event, "newURL", {enumerable:true,configurable:true,value:document.URL});
    lastURL = document.URL;
  });
}());

仕様

仕様 状態 コメント
HTML Living Standard
onhashchange の定義		 現行の標準
HTML 5.1
GlobalEventHandlers の定義		 勧告
HTML5
GlobalEventHandlers の定義		 勧告

ブラウザーの互換性

BCD tables only load in the browser

関連情報