Zensen.プログラミング、カメラを中心になんでも書く雑記ブログです。31jQuery*はじめに!!どうも!jQuery大好き、ぴーすけです!みなさんはWEBサイトやWEBシステムなどを作成していて、ユーザーにブラウザバックをしてほしくないなーっていうタイミングってありませんか?そんなときはJavaScriptやjQueryを利用してブラウザバックを禁止することができます。スポンサードリンク*jQueryを使います!!この方法はjQueryが使用できる状態が前提で話を進めます。headの中で以下のような記述をすればすぐ使えると思います。src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>jqueryが使える状態かどうかは以下の記述で確かめます。この記述は上記のjQueryの記述より下にあればどこでも大丈夫です。alert("jQueryが動いています。");});</script>DEMO*ブラウザバック禁止はしない!!いきなり覆してしまいますが、ブラウザバックの禁止はしません。この方法はブラウザバックしてほしくない時には、ブラウザバックをしていないように見せかけるようにするテクニックです。方法は以下の通りです。DEMOボタンを押すと、押した後一度だけブラウザバックができなくなるので押してからブラウザバックをしてみてください。}});DEMOどうですか?DEMOボタンが押された後にブラウザバックをしようとすると、アラートが表示されてブラウザバックが1度だけできなかったと思います。なにをやっているのかというとやっていることは、DEMOボタンを押された瞬間にURLのハッシュに値を追加しているだけなのです!URLを見ながらDEMOボタンを押してもらえると分かると思います。ブラウザバックができなくなるのかこれはとても簡単なことなのですが、ハッシュが付いた後にブラウザバックをするとハッシュが付く前のURLに戻っているからブラウザバックをしていないような挙動になっているのです。ハッシュが付く前と付いた後ではURLこそ違うものの、画面にはなにも違いがないので、ハッシュが付く前に戻ったところで画面には何も変化は現れません。ユーザにはブラウザバックが禁止されたような挙動に感じるのです。ブラウザ自体はきちんとブラウザバックをしようと処理をしているのです。今回はボタンにハッシュを付ける処理を紐付けましたが、以下のように、jQueryなどで画面表示後に明示的にhashをつけてあげることで、ブラウザバックを1度だけ禁止することができます。"hash";});下記のように、ブラウザバックされた時の処理(ハッシュが切り替わった時の処理)も書くことができるのでとても便利です。}});この方法の欠点としては、URLに余計なハッシュが付くことですが、特に変わったことをやっているページでなければ特に問題ないかと思います。手軽に実装できるのでおすすめです。jQueryのfadeIn()やshow()などの表示がうまくいかない原因!!*コメントありがとうございます。me!!どうも!ぴーすけと申します!!←詳しく自己紹介このブログは、ByUZensen.(バイウゼンセン)といいます。プログラミング、カメラ、音楽、生活、バイクなどの記事を中心に更新しています。管理者はぴーすけと申します。某ECサイトでシステムエンジニアをしています。仕事ではjavaでプログラミグをしていますが、JavaScriptが好きで、個人的にゲームを作ったりしています。他にはX-T2で写真を撮ったり、ギターで遊んだりしています。