はじめに
たまにブラウザの戻るボタン押したらアラートが出て戻れないようになっているサイトありますよね。
あれをjQueryで実装する機会があり、
色々検索してやろうとしたんですが、なかなかできない or コード量が多く…
何とか試行錯誤して簡潔にブラウザのバックボタンを無効にできたので、実装方法をまとめました。
ソースコード
コードは短め。jQuery使ってます。
$(function(){
history.pushState(null, null, null); //ブラウザバック無効化
//ブラウザバックボタン押下時
$(window).on("popstate", function (event) {
history.pushState(null, null, null);
window.alert('前のページに戻る場合、前に戻るボタンから戻ってください。');
});
});
解説
history.pushState(null, null, null);
まずこの記述で、偽の履歴を追加しています。
なのでこの記述だけで、ブラウザバックボタン1回は阻止できそう。
しかし、2回押されると戻ってしまいます。
そのため、戻るボタンを感知して毎回これを追加していく必要がありそう。
参考サイト：ブラウザの履歴を操作する
戻るボタンを押されたときにイベント発火する方法
$(window).on("popstate", function (event) {
//ここに処理を記述
});
引用 https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onpopstate
popstate イベントは、戻るボタンをクリックしたり (又は JavaScript で history.back() を呼び出したり)、
同じ文書で2つの履歴項目間を移動したりするように、ブラウザーのアクションを実行することのみがトリガーになります。
このイベントをうまく使って戻るボタン押下を感知。そんでもう一回偽の履歴を追加して、アラート表示。
ここはモーダルにできればモーダルの方が良いですね（ ＾ω＾）
応用編
特定のページだけ適用する
例えば、サイトに30くらいページがあるとして、
その中の5つのページにこのブラウザバック無効を適用したいとなると、5つのページからこのjsファイルを呼び出すのはちょっと大変ですよね。
その場合、共通で呼び出しているヘッダーなどにjsファイルを呼び出し、
jsの中で特定のページにだけ適用させるようにします。
その方法はこんな感じでいけます。
$(function(){
//URLファイル名取得
var path = window.location.pathname.split('/');
path = path[path.length-1].split('.html')[0];
//ブラウザバック対象ページ
var pathTarget = ['page_backdisable','page_backdisable1'];
if(pathTarget.indexOf(path) >= 0){
//pathTargetに入っているページだけ実行される
//上記ソースコードを書く
}
});
この場合、page_backdisable.htmlとpage_backdisable1.htmlのページのみブラウザバック無効化が適用されます。
URLファイル名取得の方法はサイトによると思います。
pathで現在いるページのファイル名を取得して、pathTargetに適用したいファイル名を記述しておきます。
pathTarget.indexOf(path)で比較し、
一致していたら0以上、一致していなかったら-1が返ってきます。
おわりに
一応Chrome、IE、Firefox、Safariらへんは試してちゃんと確認できました。
また、もっと良い書き方あったら是非コメントしてください！