Window: pagehide event
======================

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.

Syntax
------

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


```js
addEventListener("pagehide", (event) => {});
onpagehide = (event) => {};
```

Event type
----------

A `PageTransitionEvent`. Inherits from `Event`.

Event

PageTransitionEventEvent properties
----------------

`PageTransitionEvent.persisted` Read only 

Indicates if the document is loading from a cache.

Event handler aliases
---------------------

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

* `HTMLBodyElement`
* `HTMLFrameSetElement`
* `SVGSVGElement`
Usage notes
-----------

 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:

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.

 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.

Examples
--------

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.


```js
window.addEventListener(
  "pagehide",
  (event) => {
    if (event.persisted) {
      /\* the page isn't being discarded, so it can be reused later \*/
    }
  },
  false,
);
```


This can also be written using the `onpagehide` event handler property on the `Window`:


```js
window.onpagehide = (event) => {
  if (event.persisted) {
    /\* the page isn't being discarded, so it can be reused later \*/
  }
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-pagehide |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `pageshow` event.
* 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.