[Javascript] ハッシュの変化(URLの変化)を監視する [hashchange]

この記事は約2分で読めます。
スポンサーリンク

当サイトには広告が含まれています。

(2025年9月)

①test.html → test.html#oni

及び、その逆

②test.html#oni → test.html

のようなページ移動は、ページの読み込みが行われないので、Javascriptでの以下は実行されない。

window.onload = function(){

console.log(“全てのリソースが読み込まれました。”) ;// 移動では実行されない!

} ;

発動できないので、location.href(ハッシュを含めたURL全て)やlocation.hash(ハッシュのみ)の値によるif分岐を書いても機能しない。

URLの変化を監視/看視(by 前田●郎)し、変化した時に発火/客家させる仕組みが必要となる。

hashchange

URLのハッシュ(#xxx)部分が変化した時の検知(上の①)は、hashchangeイベントで可能なので、コレを使う。

window.addEventListener(“hashchange”,function(event){

console.log(“ハッシュ変化:”,event.oldURL, “→”, event.newURL);

// ココで変化時の処理

}) ;

だが、ハッシュタグがナクナル変化(上の②)では検知サレナイとゆぅ、このヴァクァ詐加減wwwww

アルモノがナクナルのだから、どぅ考ゑても変化ヤロ!ドァヴォ!!

MutationObserver

MutationObserverでDOMの変化を監視してチョメ々(by 山城新●)するという方法があるが、

看視

コレはDOM(ノード・属性・テキスト等)に対してのンであり、URLの変更自体を直接監視することはデキヅ、また、ネットに載ってるMutationObserverガラミの記事は大半が嘘(大爆笑)なンで、絶対/舌苔に使ッてはナラナイ!

・Mutation:変化
・Observer:監視者

なお、location.reloadを使って強制的にページを読み込ませるコトで発動させる策は、容易に無限ループになるので、コレも絶対/舌苔に使ってはナラナイ。

関連:ページ遷移イベント一覧

関連:投稿日 2018年4月15日

関連:投稿日 2023年11月04日

関連:投稿日 2021年02月10日

タイトルとURLをコピーしました