【jQuery】戻るや閉じるなどの画面が遷移する時にアラートを表示させる方法

ECサイトであったり、何かの問い合わせフォームを入力していて、不意な動作で戻ってしまったり、タブを閉じてしまい、

「なんてこった」

ということはありませんか？

その後、もう一度入力する気が失せてしまいそのまま離脱してしまう。
もしあなたがECサイトや何かの商売をWEB上でやっているとしたら、このように意図せずに離脱してしまうユーザーさんをしっかり繋ぎ止めておきたいところですよね。

要は画面遷移する時に「本当に閉じて良いですか？」的なやつです。
もちろん本当に離脱したいと考えているユーザーさんはアラートが表示されたとしても離脱すると思います。
問題なのは意図せず離脱しかけてしまったユーザーさんに対する配慮ですね。

意図せぬ画面遷移にはアラートを表示させよう

JavaScriptの次のページに移動する時(リロードも含む)に発生するbeforeunloadイベントを使用して実装します。

$(function(){

var loc=false;

$(window).bind("beforeunload", function(e) {

// 確認メッセージに表示させたい文字列

if (!loc) {

return "入力は完了していません｡";

}

});

// aリンクを遷移OKにする場合はこのコメントを外す

//$('a').click( function() {loc=true;});

$("form").submit(function(){loc=true;});

});

これでformのサブミット以外の遷移に関しては、アラートが出るようになります。
もしaタグでのリンクもアラート非表示にしたい場合は、$(‘a’).click部分のコメントアウトを外すと良いですよ^^

ちなみにこちらにデモページを用意しましたので、戻るや更新などをしてアラートが表示されるか確認してみてくださいな。

以上、誰かのお役に立てればうれしいです。

もし良かったらフォローとか購読して頂けると嬉しいです！╭( ･ㅂ･)و ̑̑ ｸﾞｯ !