The pagehide
event is sent to a Window
when the browser hides the current page in the process of presenting a different page from the session's history.
For example, when the user clicks the browser's Back button, the current page receives a pagehide
event before the previous page is shown.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("pagehide", (event) => {});
onpagehide = (event) => {};
In addition to the Window
interface, the event handler property onpagehide
is also available on the following targets:
Like the unload
and beforeunload
events, this event is not reliably fired by browsers, especially on mobile. For example, the pagehide
event is not fired at all in the following scenario:
- A mobile user visits your page.
- The user then switches to a different app.
- Later, the user closes the browser from the app manager.
However, unlike the unload
and beforeunload
events, this event is compatible with the back/forward cache (bfcache), so adding a listener to this event will not prevent the page from being included in the bfcache.
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 pagehide
event is the next-best alternative.
If you're specifically trying to detect page unload events, the pagehide
event is the best option.
See the Page Lifecycle API guide for more information about how this event relates to other events in the page lifecycle.
In this example, an event handler is established to watch for pagehide
events and to perform special handling if the page is being persisted for possible reuse.
window.addEventListener(
"pagehide",
(event) => {
if (event.persisted) {
}
},
false,
);
This can also be written using the onpagehide
event handler property on the Window
:
window.onpagehide = (event) => {
if (event.persisted) {
}
};