ブラウザの戻るボタンを無効化する方法を調査したので、そのときのメモ。
クライアントサーバシステムだった社内システムをWEBシステムにリプレースする案件でこういった要件を見かける。顧客は、クラサバのときの使い心地をそのままにWEBシステムにしようとするので、こんな要件がでてしまう。
少し前まで完璧にはできなかったようだが、最近になってHTML5+jQueryの組みあわせでできるようになったみたい。
〇サンプルソースはこちら
https://jsfiddle.net/saimjcf/5atzrp26/
「RUN」を押下すると、JavaScriptがロードされるので、ブラウザの戻るボタンを押してみてください。無効になっていて、画面遷移が発生しないはず。
この中でブラウザの戻るボタンを無効化しているのは以下の部分です。
|
1 2 3 4 5 6 7 8 |
// 戻るボタンを制御 history.pushState(null, null, null); $(window).on("popstate", function (event) { if (!event.originalEvent.state) { history.pushState(null, null, null); return; } }); |
〇仕組みの話
まず、上記サンプルソースが画面上にロードされると、history.pushState(null, null, null)メソッドでブラウザの履歴の先頭に新しい履歴を一つ追加します。このとき第3引数がnullなので、追加された履歴は自分自身を指していることになります。
そして、戻るボタンが押下されたら”popstate”イベントが発生しますので、その”popstate”イベントが発生したときの処理として、再度history.pushState(null, null, null)を実行して、ブラウザの履歴の先頭に新しい履歴を一つ追加します。要は、ブラウザの履歴を操作しています。
hisotry APIの詳細はこちら
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history
※サンプルソースは、Firefox、Google Chrome、IEのみで動作確認しました。
