- jQuery -
jQuery - ページが閉じられる直前のイベント(beforeunload)
作成日:2018-12-21
1. 概要
ページを閉じたり、画面遷移する直前に、beforeunloadイベントが発生します。
このイベント内で文字列を return すると、
画面遷移の確認メッセージが表示され、ページの離脱抑止が行えます。
return した文字列の扱い方は、ブラウザによって異なります。
また、ページ表示後に、一度画面のどこかをクリックしないと、確認メッセージが表示されずに画面遷移する場合があります。
このイベント内で文字列を return すると、
画面遷移の確認メッセージが表示され、ページの離脱抑止が行えます。
return した文字列の扱い方は、ブラウザによって異なります。
また、ページ表示後に、一度画面のどこかをクリックしないと、確認メッセージが表示されずに画面遷移する場合があります。
ソース
$(window).on('beforeunload', function() { 処理; }); //画面遷移時に確認メッセージが表示されます $(window).on('beforeunload', function() { 処理; return "確認"; });
2. サンプル
チェックボックスにチェックを付けて、画面遷移をしようとすると、確認メッセージが表示されます。
但し、送信ボタンがクリックされた場合には、確認メッセージを表示せずに、画面遷移できるようにしています。
但し、送信ボタンがクリックされた場合には、確認メッセージを表示せずに、画面遷移できるようにしています。
ソース
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head> <body> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <form action="0026-2.html"> <input type="checkbox" checked="checked" />ページの離脱抑止を行う<br /> <br /> <input type="submit" value="送信" /> </form> <script> $(function(){ $(window).on("beforeunload", function() { if ( $(":checkbox").prop('checked') ) { //チェックが付いている場合は、画面遷移の確認メッセージを表示します return "確認"; } }); $(":submit").on("click", function() { //beforeunload イベントを削除して、確認メッセージが表示されないようにします $(window).off("beforeunload"); }); }); </script> </body></html>
実行結果:画面