By U Zensen.

欲しいものはプログラミングで自分で作る。

jQueryでできる!!戻るボタンによるブラウザバックの禁止方法について!!

2015 / 6 / 15 2016 / 10 / 31
jQuery
ブラウザバックを禁止する方法

はじめに!!

どうも!jQuery大好き、ぴーすけです!

みなさんはWEBサイトやWEBシステムなどを作成していて、ユーザーにブラウザバックをしてほしくないなーっていうタイミングってありませんか?

そんなときはJavaScriptやjQueryを利用してブラウザバックを禁止することができます。

スポンサードリンク

jQueryを使います!!

この方法はjQueryが使用できる状態が前提で話を進めます。headの中で以下のような記述をすればすぐ使えると思います。

//googleのサイトからjQueryを使う為に必要な情報を取得
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jqueryが使える状態かどうかは以下の記述で確かめます。この記述は上記のjQueryの記述より下にあればどこでも大丈夫です。

<script>
$(function(){
  alert("jQueryが動いています。");
});
</script>
DEMO

ブラウザバック禁止はしない!!

いきなり覆してしまいますが、ブラウザバックの禁止はしません。

この方法はブラウザバックしてほしくない時には、ブラウザバックをしていないように見せかけるようにするテクニックです。

方法は以下の通りです。

DEMOボタンを押すと、押した後一度だけブラウザバックができなくなるので押してからブラウザバックをしてみてください。

jQuery

$(function(){ $(".demo_2").on('click', function(){     //ボタンを押されたらURLにハッシュを付ける location.hash="hash";   }); //ハッシュが変わったら動く処理を記述できる   window.onhashchange = function() { if (location.hash == "") {     //ハッシュが空になったら = ブラウザバックされたら   alert("ブラウザバックが一度だけ禁止されます");     }   } });
DEMO

どうですか?DEMOボタンが押された後にブラウザバックをしようとすると、アラートが表示されてブラウザバックが1度だけできなかったと思います。

なにをやっているのかというと

やっていることは、DEMOボタンを押された瞬間にURLのハッシュに値を追加しているだけなのです!URLを見ながらDEMOボタンを押してもらえると分かると思います。

なぜブラウザバックができなくなるのか

これはとても簡単なことなのですが、ハッシュが付いた後にブラウザバックをするとハッシュが付く前のURLに戻っているからブラウザバックをしていないような挙動になっているのです。

ハッシュが付く前と付いた後ではURLこそ違うものの、画面にはなにも違いがないので、ハッシュが付く前に戻ったところで画面には何も変化は現れません。なので、ユーザにはブラウザバックが禁止されたような挙動に感じるのです。

そうです。ブラウザ自体はきちんとブラウザバックをしようと処理をしているのです。

今回はボタンにハッシュを付ける処理を紐付けましたが、以下のように、jQueryなどで画面表示後に明示的にhashをつけてあげることで、ブラウザバックを1度だけ禁止することができます。

jQuery

$(function() { locatioin.hash = "hash"; });

下記のように、ブラウザバックされた時の処理(ハッシュが切り替わった時の処理)も書くことができるのでとても便利です。

jQuery

$(function(){ //ハッシュが変わったら動く処理を記述できる   window.onhashchange = function() { if (location.hash == "") {     //ハッシュが空になったら = ブラウザバックされたら   alert("ブラウザバックが一度だけ禁止されます");     }   } });

この方法の欠点としては、URLに余計なハッシュが付くことですが、特に変わったことをやっているページでなければ特に問題ないかと思います。手軽に実装できるのでおすすめです。

まとめ!!

ブラウザバックしてほしくないタイミングで、URLにハッシュをくっつければブラウザバックを禁止した風の動きになる!!

Pocket

コメント

  • ありがとうございます。
    天才だわ。わかりやすくて使いやすい!

    • 返事が遅くなりました!すいません!

      コメントありがとうございます!!
      コメントをいただけると励みになります!

      ぴーすけ

コメントを残す