Window: unload イベント

警告: 開発者はこのイベントを使用するのを避けてください。下記の「使用上のメモ」を参照してください。

unload イベントは、文書または子リソースがアンロードされるときに発生します。

以下のイベントの後に発生します。

beforeunload (キャンセル可能なイベント)
pagehide

文書は以下のような状態にあります。

すべてのリソースがまだ存在する（img、iframe など）
エンドユーザーから見えるものは何もない
UI 操作の効果がない（window.open, alert, confirm, など）
エラーが発生しても、アンロードの処理の流れは停止しない

unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの unload の前に行われます（以下の例を参照）。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("unload", (event) => {});
onunload = (event) => {};

イベントハンドラーの別名

Window インターフェイスに加えて、イベントハンドラープロパティ onunload は以下のターゲットでも利用できます。

使用上のメモ

開発者はこのイベントを使用しないでください。

特にモバイルでは unload イベントが確実には発行されません。例えば、次の例では unload イベントはまったく発生しません。

モバイルユーザーがページにアクセスします。
その後、ユーザーが異なるアプリに切り替えます。
その後、ユーザーがアプリマネージャーからブラウザーを閉じます。

また、 unload イベントは前方/後方キャッシュ (bfcache) と互換性がありません。このイベントを使用している多くのページは、イベントが発生した後はページが存在し続けないことを想定しているからです。これに対抗するため、いくつかのブラウザー（Firefox など）は unload リスナーがある場合、ページを bfcache に配置しませんが、これはパフォーマンスにとって悪いことです。他にも、 Chrome のように、ユーザーが操作しても unload を発行しないものもあります。

ユーザーのセッションの終わりを指示するために使用するのに最適なイベントは visibilitychange イベントです。 visibilitychange に対応していないブラウザーでは、 pagehide イベントが次善の選択肢となります。

ページのアンロードイベントを検出する場合は、 pagehide イベントを待ち受けするのがベストです。

unload イベントに関連する問題についての詳しい情報は、ページライフサイクル API ガイドを参照してください。

例

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Parent Frame</title>
    <script>
      window.addEventListener("beforeunload", (event) => {
        console.log("I am the 1st one.");
      });
      window.addEventListener("unload", (event) => {
        console.log("I am the 3rd one.");
      });
    </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>

child-frame.html の内容を以下に示します。

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Child Frame</title>
    <script>
      window.addEventListener("beforeunload", (event) => {
        console.log("I am the 2nd one.");
      });
      window.addEventListener("unload", (event) => {
        console.log("I am the 4th and last one…");
      });
    </script>
  </head>
  <body>
    ☻
  </body>
</html>

親フレームがアンロードされると、 console.log() のメッセージに記述された順序でイベントが発生します。