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

それは次のイベントの後に発生します:

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

  • すべてのリソースがまだ存在する (img、iframe など)
  • エンドユーザーには何も表示されません
  • UI でのやり取りは効果がありません (window.open, alert, confirm, など)
  • エラーが発生しても、アンロードワークフローは停止しません

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

バブリング いいえ
キャンセル可能 いいえ
対象のオブジェクト DefaultView, Document, Element
インターフェイス Event, ユーザーインターフェイスから生成された場合は UIEvent
既定のアクション なし

プロパティ

プロパティ 説明
target 読取専用 EventTarget イベントのターゲット (DOM ツリーの最上位のターゲット)
type 読取専用 DOMString イベントの型
bubbles 読取専用 boolean イベントが通常バブリングするかどうか
cancelable 読取専用 boolean イベントがキャンセル可能かどうか
view 読取専用 WindowProxy document.defaultView (文書の window)
detail 読取専用 long (float) 0

<!DOCTYPE html>
<html>
  <head>
    <title>Parent Frame</title>
    <script>
      window.addEventListener('beforeunload', function(event) {
        console.log('I am the 1st one.');
      });
      window.addEventListener('unload', function(event) {
        console.log('I am the 3rd one.');
      });
    </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Child Frame</title>
    <script>
      window.addEventListener('beforeunload', function(event) {
        console.log('I am the 2nd one.');
      });
      window.addEventListener('unload', function(event) {
        console.log('I am the 4th and last one…');
      });
    </script>
  </head>
  <body>
      ☻
  </body>
</html>

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

仕様書

仕様書 状態 備考
UI Events
unload の定義
草案  

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, silverskyvicto
最終更新者: mdnwebdocs-bot,