大抵のブラウザだと、次の２つのブラウザバックに対応してます。
- バックスペース押下時
- ブラウザ戻るボタン押下時
ブラウザバックというと、この２つの操作が主流。
ここでは そのブラウザバックを禁止にする方法 をまとめました。
僕自身やり方を忘れがちなので、その忘備録も兼ねてます。
このページの目次
JavaScriptでブラウザバック禁止するコードがコレ！
ブラウザバック禁止にするコードは本当に簡単
面倒なことせず、数行のコードがあればいけます。
そのブラウザバック禁止コードがコチラ！
▼ 丸丸コピペでOK
|
1 2 3 4 |
history.pushState(null, null, location.href); window.addEventListener('popstate', (e) => { history.go(1); }); |
行数にしてわずか４行。
たったこれだけなんですが、、、
戻るボタンもバックスペース押下のブラウザバックも効かなくなります。
ブラウザバック禁止コードについて簡単に解説
ただコードを載せただけだと不親切なので・・・
ここからは先ほどのコードの解説を少ししこうと思います。
１．popstate イベントを発生させないためのコード
先ほどのコードの次の部分
|
1 |
history.pushState(null, null, location.href); |
この history.pushState は文字通り、履歴を追加するためのもの
▼ この関数についてのリファレンス（英語版）
In an HTML document, the history.pushState() method adds a state to the browser's session history stack.
引用元 : https://developer.mozilla.org/ja/docs/Web/API/History/pushState
▼ この説明の意訳（）
HTMLドキュメント内では、 history.pushState() メソッドはブラウザのセッション履歴スタックに状態を追加する機能があります、
本来は第１引数に state オブジェクトが入ります。
ですが popstate イベントを発生させないため（後述）に以下の引数を渡しました。
- 第１引数 ： 空のstateオブジェクト = null
- 第２引数 ： 空のタイトル ＝ null
- 第３引数 ： 現在のURL ＝ window.location
これで直前の履歴スタックには、無効な state オブジェクトが入ることに。
それが次に紹介する popstate イベントの無効化に役立ちます。
２．popstate イベントリスナー登録のコード
そして popstate イベントをリスナー登録するコード追加
|
1 2 3 |
window.addEventListener('popstate', (e) => { history.go(1); }); |
上コードの 'popstate' は履歴変更時に発火するイベント
その発火時に history.go(1): とすることで、１つ後の履歴（＝ つまり history.pushState から追加した現在ページの履歴）に飛ばすだけですね。
そうすることでブラウザバックと相殺し、戻るが効かなくなるという仕組み
ちなみにjQueryでブラウザバック禁止するには
もちろん jQueryを使ってブラウザバック禁止 も可能。
先ほどのJSコードをjQuery風に書き換えすればできます。
そのjQuery風に書き直したのがコチラ！
▼ 先ほどのコードを書き変えたもの
|
1 2 3 4 |
history.pushState(null, null, location.href); $(window).on('popstate', function(){ history.go(1); }); |
まあさっきのコードとほとんど変わらないけど・・・
jQueryを使える環境ならこちらのコードの方が分かりやすいかもしれません。
ちなみにF5（リロード）禁止にするには
蛇足だけど リロード禁止 について。
残念ながら、リロード自体は禁止できません。
ですが更新前に【確認アラートを表示】させることは可能です。
▼ 詳しくはコチラの記事をチェック
やり方自体はそんなに難しくありません。
ということで、JSからブラウザバック禁止する方法でした。
今紹介したみたいに テンプレコードを書くだけでOKです。
ではまた($・・)/~~~ﾊﾞｲﾊﾞｲ
