Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning: Developers should avoid using this event. See "Usage notes" below.
The unload
event is fired when the document or a child resource is being unloaded.
It is fired after:
beforeunload
(cancelable event)pagehide
The document is in the following state:
window.open
, alert
, confirm
, etc.)Please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload
(see example below).
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("unload", (event) => { })
onunload = (event) => { }
Event type
A generic Event
.
In addition to the Window
interface, the event handler property onunload
is also available on the following targets:
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:
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.
<!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.
DOMContentLoaded
, readystatechange
, load
visibilitychange
event.visibilitychange
, not beforeunload
/unload
.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3