JavaScript/イベント/hashchange

JavaScript/イベント/hashchange

ページ内リンクを張る場合このような URL の末尾にシャープに続くラベルを与えてそのIDと合致する要素の位置へ移動できる。

http://example.com/hoge#abc

これがブラウザのデフォルトの動き。 つまりこれはページの中を移動するための手段であるので新規にロードが発生しないという特徴があった。 そこに目をつけて、リクエストは発生しないが JS がコントロールしやすい URL としてこのシャープの記法がよく使われるようになった。

ここでブラウザの動き、つまり URL を変えれば画面遷移するというモノを JS でシミュレートする必要が出てくる。 ここで便利に使えるのがこの hashchange イベントでこれにより URLのシャープ以降の部分が変化したら画面の一部を書き換えるというような動作ができる。

window.addEventListener("hashchange", function(){
    //
});
before after fire memo
通常の#無しロード x いきなりロードしても動かない
通常の#付きロード x いきなりロードしても動かない
#a #b o 当たり前だがこれで発火する
#a x シャープ自体を取るとリロード扱いなので発火しない
#a # o シャープ以降は取るけどシャープ残し
#a o 取る方は駄目だがつける方は発火する

ハッシュの値自体は

location.hash;

で取得できる。この値は # を含む

javascript/ope/dom_ope/event/hashchange.txt · 最終更新: 2020-01-14 17:56 by ore