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 の定義	勧告

ブラウザーの互換性

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`onhashchange`	Chrome 完全対応 5	Edge 完全対応あり	Firefox 完全対応 3.6	IE 完全対応 8	Opera 完全対応 10	Safari 完全対応 5	WebView Android 完全対応あり	Chrome Android 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応 10.1	Safari iOS 完全対応 5	Samsung Internet Android 完全対応あり

凡例

完全対応: 完全対応