JavaScriptでブラウザバックを “ほぼ完全禁止” する方法

大抵のブラウザだと、次の2つのブラウザバックに対応してます。

  • バックスペース押下時
  • ブラウザ戻るボタン押下時

ブラウザバックというと、この2つの操作が主流。

ここでは そのブラウザバックを禁止にする方法 をまとめました。

僕自身やり方を忘れがちなので、その忘備録も兼ねてます。

JavaScriptでブラウザバック禁止するコードがコレ!

ブラウザバック禁止にするコードは本当に簡単

面倒なことせず、数行のコードがあればいけます。

 

そのブラウザバック禁止コードがコチラ!

▼ 丸丸コピペでOK

行数にしてわずか4行。

たったこれだけなんですが、、、

戻るボタンもバックスペース押下のブラウザバックも効かなくなります。

ブラウザバック禁止コードについて簡単に解説

ただコードを載せただけだと不親切なので・・・

ここからは先ほどのコードの解説を少ししこうと思います。

1.popstate イベントを発生させないためのコード

先ほどのコードの次の部分

この 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() メソッドはブラウザのセッション履歴スタックに状態を追加する機能があります、

本来は第1引数に state  オブジェクトが入ります。

ですが popstate  イベントを発生させないため(後述)に以下の引数を渡しました。

  • 第1引数 : 空のstateオブジェクト =  null
  • 第2引数 : 空のタイトル =  null
  • 第3引数 : 現在のURL =  window.location

これで直前の履歴スタックには、無効な state  オブジェクトが入ることに。

それが次に紹介する popstate  イベントの無効化に役立ちます。

2.popstate イベントリスナー登録のコード

そして popstate イベントをリスナー登録するコード追加

上コードの 'popstate'  は履歴変更時に発火するイベント

その発火時に history.go(1):  とすることで、1つ後の履歴(= つまり history.pushState  から追加した現在ページの履歴)に飛ばすだけですね。

そうすることでブラウザバックと相殺し、戻るが効かなくなるという仕組み

ちなみにjQueryでブラウザバック禁止するには

もちろん jQueryを使ってブラウザバック禁止 も可能。

先ほどのJSコードをjQuery風に書き換えすればできます。

 

そのjQuery風に書き直したのがコチラ!

▼ 先ほどのコードを書き変えたもの

まあさっきのコードとほとんど変わらないけど・・・

jQueryを使える環境ならこちらのコードの方が分かりやすいかもしれません。

ちなみにF5(リロード)禁止にするには

蛇足だけど リロード禁止 について。

残念ながら、リロード自体は禁止できません。

ですが更新前に【確認アラートを表示】させることは可能です。

▼ 詳しくはコチラの記事をチェック

やり方自体はそんなに難しくありません。

 

ということで、JSからブラウザバック禁止する方法でした。

今紹介したみたいに テンプレコードを書くだけでOKです。

ではまた($・・)/~~~バイバイ

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください