Window: pageshow event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The pageshow event is sent to a Window when the browser displays the window's document due to navigation.

This includes:

Initially loading the page
Navigating to the page from another page in the same window or tab
Restoring a frozen page on mobile OSes
Returning to the page using the browser's forward or back buttons

Note: During the initial page load, the pageshow event fires after the load event.

Syntax

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

addEventListener("pageshow", (event) => { })
onpageshow = (event) => { }

Event type

A PageTransitionEvent. Inherits from Event.

Event 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 onpageshow is also available on the following targets:

This example sets up event handlers for events listed in the array events. The handler, eventLogger(), logs the type of event that occurred to the console, and includes the value of the persisted flag on pageshow and pagehide events.

JavaScript

const events = ["pagehide", "pageshow", "unload", "load"];
const eventLogger = (event) => {
 switch (event.type) {
 case "pagehide":
 case "pageshow": {
 let isPersisted = event.persisted ? "persisted" : "not persisted";
 console.log(`Event: ${event.type} - ${isPersisted}`);
 break;
 }
 default:
 console.log(`Event: ${event.type}`);
 break;
 }
};
events.forEach((eventName) => window.addEventListener(eventName, eventLogger));

HTML

html

<p>
 Open the console and watch the output as you navigate to and from this page.
 Try loading new pages into this tab, then navigating forward and backward
 through history, noting the events' output to the log.
</p>