jQuery - ページが閉じられる直前のイベント(beforeunload)

作成日:2018-12-21

1. 概要

ページを閉じたり、画面遷移する直前に、beforeunloadイベントが発生します。
このイベント内で文字列を 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>

実行結果:画面