ブラウザの戻るボタンを無効化する方法

寒いので夏まで冬眠したいYu-ichiです

さて今回はブラウザの戻るボタンを無効化する方法です。
いろいろなやり方がありますが、今回は一番簡単な方法をご紹介します。

history.pushStateとpopstateを使います。

////////////////////////////////////////////////////////////////////////

$(function() {
   history.pushState(null, null, null);
   $(window).on('popstate', function(){
       history.pushState(null, null, null);
   });
});

////////////////////////////////////////////////////////////////////////

これです。

history.pushStateでブラウザのセッション履歴をいじって、
popstateで「戻る」ボタンをクリックしたときの動作を変更しています。

ちなみにですが、この方法を使ってもChrome・Edgeでは効かないケースがあります。
ページを遷移してすぐに「戻る」ボタンをクリックすると戻れちゃいます。
ページ遷移してから画面をどこか1度でもクリックすると、ちゃんと発火して「戻る」ボタンが無効化されます。

この機能を使ったスパムが増えたため、Googleが対処した結果このような仕様になったようです。
https://www.zdnet.com/article/google-working-on-blocking-back-button-hijacking-in-chrome/

Chromeの仕様が戻ることは無いと思うし、他のブラウザも同じ対処をすることも考えられそうです。

では、また来年会いましょう。