JavaScriptで履歴に残さないでリダイレクトする

JavaScriptでのリダイレクトで別ページに移動した際、ブラウザバックなどでリダイレクト元に戻らないようにする方法をメモ。

サンプルコード

今回はindex.htmlにbefore.htmlへのリンクを設置して、before.htmlからafter.htmlにリダイレクトする想定で試してみます。

まずは普通にリダイレクトさせてみます。
before.htmlに対してJavaScriptを追加します。

location.href = 'after.html';

これで動作を試してみた場合、確認した限りでブラウザの履歴にbefore.htmlは残らないようでした。
リダイレクトのデモページ

次に一定時間before.htmlを表示した後で、after.htmlにリダイレクトする想定を試してみます。

setTimeout(function() {
	location.href = 'after.html';
}, 3000);

この場合は先ほどと違い、before.htmlはブラウザ履歴に残るようでした。
また、戻るボタンクリック時の挙動がブラウザによって異なり、chromeとedgeの場合はindex.html、FirefoxとSafariではbefore.htmlに遷移しました。
リダイレクトのデモページ2

ブラウザ履歴を残さないで遷移ができるlocation.replace()を使ってみます。

setTimeout(function() {
	location.replace('after.html')
}, 3000);

これで各ブラウザで履歴が残らなくなり、戻るボタンクリック時にもindex.htmlに遷移するようになりました。
リダイレクトのデモページ3

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930