web-dev-qa-db-ja.com

location.hashとバック履歴

ハッシュ値を変更するときにブラウザがバックヒストリーエントリを記録しないようにするために呼び出すことができる関数はありますか?

ユーザーが各画像を移動するときにページをリロードせずにブラウザーのURLを変更する単純なJavaScriptギャラリーを作成しています。

これは、location.hashを画像の一意のIDに設定することによって行われます。

window.location.hash = imageID;

問題は、ユーザーがブラウザの戻るボタンを押すと、ページの読み込みのようにすべての画像を逆方向に移動する必要があることです。

ギャラリーを使用して20枚の画像を回転させた場合、前のページに戻るには21回クリックする必要があります。

バックヒストリーがjavascriptで記録されないようにするにはどうすればよいですか?

15

window.location.replaceを使用すると、ブラウザの履歴に追加せずにURLを設定できます。

var baseUrl = window.location.href.split('#')[0];
window.location.replace( baseUrl + '#' + imageID );

ドキュメント

30
jalbee

replaceState() を使用できます。

ハッシュを変更する前に、履歴を保存し、次にハッシュを変更し、最後に履歴を保存したものに置き換えます。

または、 popState Event を使用することもできます。

4
Charles