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です。

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

Shareこの記事をシェアしよう!

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

8件のコメント
  • いいかげんなことかくな

    できねーよ

    6月 1, 2021 5:33 pm
  • 通りすがり

    (普通にできましたけど…)

    6月 8, 2021 6:36 pm
  • 通りすがり2

    いいかげんなことかくな さんはきっと理解せずに、
    適当な位置に貼り付けているだけの
    いわゆる無能だということが分かりますね。
    無能な上に、暴言とは、
    日本語も使えない救いようのない無能人間ですね。
    困った困った

    6月 15, 2021 8:08 pm
  • NEG4

    助かりました!

    7月 7, 2021 6:13 pm
    • ぴー助

      お助けになったようで嬉しいです。
      コメントありがとうございます!

      7月 7, 2021 6:41 pm
  • 私も通りすがりです

    Safariでは使用できましたが、Chrome(バージョン91.0.4472.114)では効きませんでしたね。

    まあ確かに言葉遣いは良くないですがChrome以外のブラウザ使ってる開発者なんてほぼほぼ居ないですから、「できねーよ」と言う発言に繋がるのもわからなくはないですね。

    7月 20, 2021 12:40 pm
  • 私も通りすがりです

    ↑と思ったのですがChromeはフォーカスが一度でも当たっていないと、前のページに戻れてしまうみたいですね。
    失礼しました。

    7月 20, 2021 12:44 pm
    • ぴー助

      コメントありがとうございます!

      フォーカスが一度でも当たらない場合は前ページに戻れてしまう、という現象は知りませんでした。もし本当にブラウザバックを禁止するなら、サーバー側でアレコレするのが確実かもしれません。ご指摘ありがとうございました。

      7月 20, 2021 2:02 pm

コメントを残す

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

CAPTCHA


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