Widely available Supported across all major browsers. Safe to use in production.

Page transition events

The PageTransitionEvent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded.

Event PageTransitionEvent

Events

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
PageTransitionEvent
4
12
1.5
5
18
4
PageTransitionEvent

The PageTransitionEvent() constructor creates a new PageTransitionEvent object, that is used by the Window/pageshowevent or Window/pagehideevent events, fired at the window object when a page is loaded or unloaded.
16
79
11
6
18
6
persisted

The persisted read-only property indicates if a webpage is loading from a cache.
4
12
11
5
18
4
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.
3
12
6
5
18
4.2
pageshow_event

The pageshow event is sent to a Window when the browser navigates to a new document.
3
12
6
5
18
4.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
window.addEventListener("pageshow", (event) => {
  if (event.persisted) {
    alert("The page was cached by the browser");
  } else {
    alert("The page was NOT cached by the browser");
  }
});

Use cases

  • Using Page transition events

    The PageTransitionEvent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links