TODO: SkipNavigation

[JavaScript]ブラウザの戻るボタンを禁止する方法 2019

History API の pushstate, popstate を使ってブラウザバックを制御します。

javascript
document.addEventListener('DOMContentLoaded', function() {
  history.pushState(null, null, null)

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

Chrome 以外はこれでブラウザバックが無効になります。

Chrome は画面内のどこかをクリックしたあとでないと popstate が発火しません。遷移したあとすぐにブラウザの戻るボタンを押すと普段通りに戻れてしまいます。2018年末にはこの仕様になっていたようです。

Google working on blocking Back button hijacking in Chrome
https://www.zdnet.com/article/google-working-on-blocking-back-button-hijacking-in-chrome/

jQuery でいうところの $('body').trigger('click') みたいなことをしてもダメです。

まあ、「ブラウザの戻るボタンを無効にして戻れなくしてやろう」なんて極悪な考えなのでよほどのことがない限り実装しないほうがいいと思いますね。

以上。

お役立ち男

フロントエンド専門。フリーランスで10年以上活動しています。