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