【JavaScript・初心者向け】ブラウザバックを無効化（実質無効化）

1月 25, 20181月 28, 2018

今回はJavaScriptによるブラウザバックを無効化する方法を、初心者向け講座として書きます。

1. ブラウザバック無効化
2. 1回実行しただけでは、完全に無効化されないブラウザバック
3. 擬似的にブラウザバックを無効化する
4. まとめ

ブラウザバック無効化

まずはシンプルな開設しているサイトをご紹介します。

HTML5 の pushState/popState でヒストリバックを無効にする

なんのこっちゃと・・・
今回も初心者に向けて、イメージしやすいように解説していきます。

ブラウザバック無効化しているようで
実はブラウザバックを行っている

上記のサイトで記述している

 history.pushState(null, null, null);

の部分について。

このスクリプト部分は以下のようなイメージです。

ページの直前に今見ているページを差し込んでいる

つまりは

以下の様な履歴があった場合

1.Aページ←今見ているページ
2.Bページ←一つ前に表示していたページ
3.Cページ←二つ前に表示していたページ

history.pushState(null, null, null);を実行したら以下のブラウザの履歴となる。

↓

1.Aページ←今見ているページ
2.Aページ←一つ前に表示していたページとして履歴に追加
3.Bページ←二つ前に表示していたページとして履歴を移動
4.Cページ←三つ前に表示していたページとして履歴を移動

という形になるのです。

1回実行しただけでは、完全に無効化されないブラウザバック

history.pushState(null, null, null);を一回実行しただけでは
2回ブラウザバックを押したときに上記の「3.」の部分にページが遷移してしまいます。
何故なら履歴に1個自分自身を追加しただけなので、その前のページに進んでしまうのは当然のことです。

ではどうするべきか

擬似的にブラウザバックを無効化する

※HTML5向けの記述方法になります。
ものすごく簡単に書くと以下のようになります。


　$(window).on( "popstate", function(event){
　　//. このページで「戻る」を実行
　　 history.pushState(null, null, null);
　});

$(window).on( "popstate", function(event){});

は、ブラウザバックを検知する処理をイベントハンドラで登録しています。
ブラウザバックが押されたときにfunctionの中身が実行されるようになります。
functionの中に history.pushState(null, null, null);を入れてあげれば
ブラウザバックを押す度に、

「前画面に戻る→今表示しているページを、1ページ前に追加する→
　前画面に戻る→今表示しているページを、1ページ前に追加する→前画面に戻る→∞」

ということになるのです。

紙芝居で一つ前に戻ろうとするたびにその前のページに
同じ絵が差し込まれていくイメージです。

詳しくはpukiwikiの「ブラウザの戻る禁止 – 闘うITエンジニアの覚え書き」を参照すると実際に書けるかもしれません。