[jQuery] ページを閉じる時に確認メッセージを表示する（beforeunload）

投稿日：2017年5月28日更新日：2019年3月10日

ページを閉じる時に確認メッセージを表示するには、beforeunloadを使用します。

しかし、beforeunloadは厳密にいうと閉じるタイミングではなく、ページがアンロードするタイミングでイベントが発生します。なのでForm送信するタイミングでもイベント発生するので、実装に少し工夫が必要です。

サンプルソース

例１）beforeunloadのタイミングで確認メッセージを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $(window).on('beforeunload', function(){
    return "ページを閉じてもよろしいですか？";
  });
</script>
</head>
<body>
  <form action="xx.php">
    <input type="text" id="txt1">
    <input type="submit" id="smt1" value="送信">
  </form>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$(window).on('beforeunload', function(){

return "ページを閉じてもよろしいですか？";

});

</script>

</head>

<body>

</form>

</body>

</html>

例２）submit時を除くbeforeunloadで確認メッセージを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $(window).on('beforeunload', function(){
    return "ページを閉じてもよろしいですか？";
  });

  $("input[type=submit]").on('click', function(){
    $(window).off('beforeunload');
  });
</script>
</head>
<body>
  <form action="xx.php">
    <input type="text" id="txt1">
    <input type="submit" id="smt1" value="送信">
  </form>
</body>
</html>