Window: unload event

Syntax

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

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

onunload = (event) => { }

Event type

A generic Event.

Event handler aliases

In addition to the Window interface, the event handler property onunload is also available on the following targets:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Usage notes

Developers should avoid using this event.

Especially on mobile, the unload event is not reliably fired. For example, the unload 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, the unload event is not compatible with the back/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 the unload when a user navigates away.

The best event to use to signal the end of a user's session is the visibilitychange event. In browsers that don't support visibilitychange the next-best alternative is the pagehide 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 the pagehide event.

See the Page Lifecycle API guide for more information about the problems associated with the unload event.

Examples

<!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 of child-frame.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 the console.log() messages.

Specifications

Browser compatibility

See also

• Related events: DOMContentLoaded, readystatechange, load
• Unloading Documents — unload a document
• The visibilitychange event.
• Don't lose user and app state, use Page Visibility explains in detail why you should use visibilitychange, not beforeunload/unload.
• Page Lifecycle API gives best-practices guidance on handling page lifecycle behavior in your web applications.
• PageLifecycle.js: a JavaScript library that deals with cross-browser inconsistencies in page lifecycle behavior.
• Back/forward cache explains what the back/forward cache is, and its implications for various page lifecycle events.