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 完全対応 ありFirefox 完全対応 3.6IE 完全対応 8Opera 完全対応 10Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 5Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報