jQuery - ページが閉じられる直前のイベント(beforeunload)
公開日：2018-12-21
更新日：2019-05-14
更新日：2019-05-14
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>
実行結果：画面
