ブラウザの戻るを禁止する方法

制作している際に、戻るを禁止したいと思い、ブラウザで戻るを禁止する方法を勉強しました。

---

history.pushStateを使う

HTML5で追加された、JSのHistory APIのメソッドhistory.pushStateを使うらしい。

history.pushStateには3つの引数がある。

history.pushState(state, title, url)

• state
  履歴移動を検知するpopstateというイベントがこのstateを元に処理を実行させるためにあるもの
• title
  履歴のタイトルを指定できるもの。今のところ、あまり使用されてないみたい
• url
  履歴にurlを追加するもの

戻るを禁止するには

history.pushState(null,null,null);

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

history.pushState(null,null,null);で履歴に今見ているページを追加。

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

によって「戻る」が発生した際に毎回履歴に今見ているページを追加する 。

引数のstateが分かりにくかったので、使ってみた。

stateに"戻りました"と追加し、戻るを押した時に、毎回consoleで戻りましたと表示されるようにした。

history.pushState("戻りました。",null,null);

window.addEventListener("popstate",function(){
    history.pushState("戻りました。",null,null);
　console.log(e.state);
});

【参考】
【JavaScript・初心者向け】ブラウザバックを無効化（実質無効化）
Javascriptでブラウザの「戻る」ボタンを押したらイベントを発動する方法を探る
JavaScriptでURLを操作するメモ

---

戻るを禁止するためにpushStateやpopstate使用しましたが、調べていると他にもパラメータをつけたりなど色々な使い方ができると知りました。

また、History APIにはpushStateやpopstateの他にもreplaceStateなどがあり、ブラウザによっては使用不可であったり、画面ロード時に、履歴移動を感知するpopstateが発火してしまうブラウザがあったりなど、使用する際、注意も必要でした。

【参考】
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする
History APIとスマホブラウザでのハマりどころ