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
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onhashchangeChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 8Opera 完全対応 10Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報