【jQuery】戻るや閉じるなどの画面が遷移する時にアラートを表示させる方法
ECサイトであったり、何かの問い合わせフォームを入力していて、不意な動作で戻ってしまったり、タブを閉じてしまい、
「なんてこった」
ということはありませんか?
その後、もう一度入力する気が失せてしまいそのまま離脱してしまう。
もしあなたがECサイトや何かの商売をWEB上でやっているとしたら、このように意図せずに離脱してしまうユーザーさんをしっかり繋ぎ止めておきたいところですよね。
要は画面遷移する時に「本当に閉じて良いですか?」的なやつです。
もちろん本当に離脱したいと考えているユーザーさんはアラートが表示されたとしても離脱すると思います。
問題なのは意図せず離脱しかけてしまったユーザーさんに対する配慮ですね。
プログラミングやWordPressを習得するのに一番近道な方法とは?
意図せぬ画面遷移にはアラートを表示させよう
JavaScriptの次のページに移動する時(リロードも含む)に発生するbeforeunloadイベントを使用して実装します。
1 2 3 4 5 6 7 8 9 10 11 12 | $(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部分のコメントアウトを外すと良いですよ^^
ちなみにこちらにデモページを用意しましたので、戻るや更新などをしてアラートが表示されるか確認してみてくださいな。
以上、誰かのお役に立てればうれしいです。