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

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

 
man-93951_640
「なんてこった」

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

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

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

プログラミングやWordPressを習得するのに一番近道な方法とは?

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

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

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

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

デモページ

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

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA