ブラウザ ウィンドウを閉じるかページを更新するときにコードを実行する

多くの場合、ユーザーがブラウザ ウィンドウを閉じるとき、またはページを更新するときに特定のアクションを実行することが望ましいことがあります。 Web ページを更新します。幸いなことに、このニーズに対処するために利用できるイベント ハンドラーが 2 つあります: window.onbeforeunload と window.onunload.

window.onbeforeunload

onbeforeunload イベントは、ユーザーがアクセスしたときにトリガーされます。ページから離れようとします。通常、これは、ユーザーに選択を確認するための確認ボックスを表示するか、未保存のデータがある場合にページから離れるのを防ぐために使用されます。ただし、文字列を返さない、またはevent.returnValueを設定することで、ブラウザにメッセージが表示されるのを防ぎ、コードをサイレントに実行できます。

window.onunload

onunload イベントは、ページがブラウザからアンロードされるときに発生します。これは一般に、残留イベント リスナーの削除やデータベース接続の終了などのクリーンアップ タスクを実行するために使用されます。

実装

onbeforeunload と onunload の両方をウィンドウ プロパティに割り当てることができます。 .addEventListener メソッドを使用します。以下に例を示します:

// window property
window.onbeforeunload = function() {
  // Do something
};

// .addEventListener
window.addEventListener("beforeunload", function(e) {
  // Do something
});

注:

iframe の場合、iframe が親によって削除されたときに onbeforeunload イベントはトリガーされませんが、unload イベントと page Hide イベントはトリガーされます。ただし、Firefox には現在、iframe 削除の場合にこれらのイベントが発生しないバグがあり、Firefox で iframe が削除される直前にコードを実行できなくなります。