JavaScriptのbeforeunloadイベントでページの離脱防止
2021/03/16
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、誤ってページ遷移した場合、元のページに戻っても入力内容がリセットされる。
仮に入力ページ→入力内容確認ページと遷移していればセッション等で保存することは可能だけど、入力ページ→その他ページに遷移する際は保存することも難しい。
妥協案としてフォームページから離脱する場合は「入力内容は保存されません。ページ移動しますか?」といったようなアラートを表示させることになった。以下に方法をメモ。
beforeunloadイベントを使う
調べてみると以下beforeunloadイベントを使うのが良さそう。
https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event
注意点としてアラート内の「入力内容は保存されません。ページ移動しますか?」等のメッセージはIEのみ変更可能。他ブラウザは変更不可。
離脱のみを防ぐ場合
$(function(){ $(window).on('beforeunload', function() { return '入力内容は保存されません。ページ移動しますか?'; }); });
フォームと組み合わせ
$(function(){ $(window).on('beforeunload', function() { return '入力内容は保存されません。ページ移動しますか?'; }); $('button[type=submit]').on('click', function(){ $(window).off('beforeunload'); }); });
調べたところ上記の形がよく見受けられたがバリデートを挟む場合、「submitボタンクリック→バリデートでNG」になった時点でbeforeunloadイベントが削除される。
そうすると「submitボタンクリック→バリデートでNG→適当なリンクをクリック」とした場合、beforeunloadイベントが発火せずページ遷移してしまう。
その為、バリデートを挟むのであれば以下のような形で対応する。
$(function(){ $(window).on('beforeunload', function() { //登録ボタンクリック時は無効 $("#submit-btn").on("click", function(){ return false; }); return '入力内容は保存されません。ページ移動しますか?'; }); }); //バリデート function validate(){ //何らかのバリデート処理 //問題ない場合はbeforeunloadイベントを無効 $(window).off('beforeunload'); //フォーム送信 $('#regist_form').submit(); //IEの二重送信対策 return false; }
所感
本機能実装の為に複数記事を調べたが、beforeunloadイベントはブラウザの種類やバージョンにより動いたり動かなかったりと動作が不安定っぽい印象を受けた。
基本的に本機能の実装は見送るのが無難かもしれない。とはいえ要望を受けると実装するしかないのでその場合は動作が不安定っぽい旨は最初に伝えた方が良さそう。
関連記事
-
-
jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...
-
-
jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法
jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...
-
-
jQuery UI Datepickerで日本の祝祭日を表示
やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...
-
-
jQueryで配列の値を検索
やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...