Baseline Widely available
The pageshow
event is sent to a Window
when the browser displays the window's document due to navigation.
This includes:
Note: During the initial page load, the pageshow
event fires after the load
event.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("pageshow", (event) => { })
onpageshow = (event) => { }
Event type Event properties
PageTransitionEvent.persisted
Read only
Indicates if the document is loading from a cache.
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.
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
<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>
Results Specifications Browser compatibility See also
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