サンプルコード付き！JavaScript/jQueryでブラウザ・タブ閉じ検知を徹底解説

JavaScript / jQuery でブラウザまたはタブの閉じ検知を行う方法

JavaScript によるブラウザ・タブ閉じ検知

1 window.onbeforeunload イベント

ブラウザウィンドウが閉じられる前に呼び出されるイベントです。このイベント内で処理を記述することで、ユーザーに確認メッセージを表示したり、データを保存したりといった処理を行うことができます。

window.onbeforeunload = function(event) {
  // ユーザーに確認メッセージを表示
  var message = "このページを閉じますか？";
  if (!confirm(message)) {
    // キャンセルの場合、イベントをキャンセル
    event.preventDefault();
  }
};

2 window.onunload イベント

ブラウザウィンドウが閉じられた後に呼び出されるイベントです。window.onbeforeunload イベントと異なり、ユーザーによるキャンセルは発生しません。

window.onunload = function() {
  // データを保存
  // ...
};

jQuery によるブラウザ・タブ閉じ検知

jQuery では、beforeunload と unload イベントをより簡単に扱うためのメソッドを提供しています。

1 $(window).on('beforeunload', ...)

window.onbeforeunload イベントと同様の処理を行うことができます。

$(window).on('beforeunload', function(event) {
  // ユーザーに確認メッセージを表示
  var message = "このページを閉じますか？";
  if (!confirm(message)) {
    // キャンセルの場合、イベントをキャンセル
    event.preventDefault();
  }
});

2 $(window).on('unload', ...)

$(window).on('unload', function() {
  // データを保存
  // ...
});

補足

• 上記の例では、確認メッセージを表示する例を紹介していますが、必要に応じて他の処理を行うこともできます。
• window.onbeforeunload イベントは、ブラウザによってはキャンセルできない場合があるため、注意が必要です。
• 複数のタブを開いている場合、window.onbeforeunload イベントは閉じようとしているタブのみで発生します。

JavaScript によるブラウザ・タブ閉じ検知

window.onbeforeunload = function(event) {
  // ユーザーに確認メッセージを表示
  var message = "このページを閉じますか？";
  if (!confirm(message)) {
    // キャンセルの場合、イベントをキャンセル
    event.preventDefault();
  }
};

2 window.onunload イベント

window.onunload = function() {
  // データを保存
  // ...
};

jQuery によるブラウザ・タブ閉じ検知

1 $(window).on('beforeunload', ...)

$(window).on('beforeunload', function(event) {
  // ユーザーに確認メッセージを表示
  var message = "このページを閉じますか？";
  if (!confirm(message)) {
    // キャンセルの場合、イベントをキャンセル
    event.preventDefault();
  }
});

$(window).on('unload', function() {
  // データを保存
  // ...
});

その他のサンプルコード

• ブラウザのタブを閉じるときに警告を表示する

$(window).on('beforeunload', function() {
  return "このページを閉じると、データが失われます。";
});

$(window).on('beforeunload', function() {
  // データを保存する処理
  // ...
});

ブラウザ・タブ閉じ検知のその他の方法

onpagehide イベントは、ページが非表示になった時に発生します。ブラウザのタブが閉じられた場合も、このイベントが発生します。

window.onpagehide = function() {
  // 処理
  // ...
};

Service Workerは、ブラウザのバックグラウンドで動作するスクリプトです。ブラウザのタブが閉じられた時にイベントを受け取ることができます。

self.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    // 処理
    // ...
  }
});

第三者ライブラリ

ブラウザ・タブ閉じ検知を容易にする、いくつかの第三者ライブラリが存在します。

これらのライブラリを使用することで、より簡単にブラウザ・タブ閉じ検知を行うことができます。

注意事項

• onpagehide イベントは、ブラウザによってはサポートされていない場合があります。
• Service Workerは、比較的新しい技術であり、すべてのブラウザでサポートされているわけではありません。
• 第三者ライブラリを使用する場合は、ライブラリのドキュメントをよく読んでから使用してください。

ブラウザ・タブ閉じ検知には、いくつかの方法があります。上記で紹介した方法を参考に、目的に合った方法を選択してください。