Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

Window: unload event

Warning:Developers should avoid using this event. See "Usage notes" below.

Theunload event is fired when the document or a child resource is being unloaded.

It is fired after:

The document is in the following state:

  • All the resources still exist (img, iframe etc.)
  • Nothing is visible anymore to the end user
  • UI interactions are ineffective (window.open,alert,confirm, etc.)
  • An error won't stop the unloading workflow

Please note that the unload event also follows the document tree: parent frame unload will happenbefore child frameunload (see example below).

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

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

Event type

A genericEvent.

Event handler aliases

In addition to theWindow interface, the event handler propertyonunload is also available on the following targets:

Usage notes

Developers should avoid using this event.

Especially on mobile, theunload event is not reliably fired. For example, theunload event is not fired at all in the following scenario:

  1. A mobile user visits your page.
  2. The user then switches to a different app.
  3. Later, the user closes the browser from the app manager.

Also, theunload event is not compatible with theback/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire theunload when a user navigates away.

The best event to use to signal the end of a user's session is thevisibilitychange event. In browsers that don't supportvisibilitychange the next-best alternative is thepagehide event, which is also not fired reliably, but which is bfcache-compatible.

If you're specifically trying to detect page unload events, it's best to listen for thepagehide event.

See thePage Lifecycle API guide for more information about the problems associated with theunload event.

Examples

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>

Below, the content ofchild-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>

When the parent frame is unloaded, events will be fired in the order described by theconsole.log() messages.

Specifications

Specification
HTML
# event-unload
HTML
# handler-window-onunload

Browser compatibility

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp