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