Window: hashchange イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
hashchange イベントは、 URL のフラグメント識別子 (URL の # 記号で始まり続く部分) が変化したときに発生します。
このイベントは、ハッシュが history.pushState() や history.replaceState() を使用して変更された場合は発生しません。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("hashchange", (event) => { })
onhashchange = (event) => { }
イベント型
HashChangeEvent です。 Event を継承しています。
イベントプロパティ
HashChangeEvent.newURL読取専用-
ウィンドウのナビゲーション先となる新しい URL を表す文字列です。
HashChangeEvent.oldURL読取専用-
ウィンドウのナビゲーション元である前回の URL を表す文字列です。
イベントハンドラーの別名
Window インターフェイスに加え、イベントハンドラープロパティ onhashchange は、以下のターゲットでも利用可能です。
例
hashchange イベントは addEventListener メソッドの中で使用することができます。
js
window.addEventListener("hashchange", () => {
console.log("ハッシュが変更されました。");
});
または onhashchange イベントハンドラープロパティを使用して、
js
function locationHashChanged() {
if (location.hash === "#cool-feature") {
console.log("cool feature にアクセスしました。");
}
}
window.onhashchange = locationHashChanged;
仕様書
| Specification |
|---|
| HTML # event-hashchange |
| HTML # handler-window-onhashchange |
ブラウザーの互換性
関連情報
popstateイベント