Window: sự kiện pageshow

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 navigates to a new document.

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 (including when restored from the bfcache).
Opening a page in a background tab.
Prerendering a page, even before it is activated.

Warning: Despite the name, the pageshow event does not fire when the page is actually shown to the user. For example, it may be opened in a background tab or prerendered. If you are interested in responding to the page being shown to the user, use the following events:

pagereveal: Sent when a page is first rendered.
visibilitychange: Sent each time a page's visibility changes.
prerenderingchange: Sent when a prerendered page is activated.

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

Cú pháp

Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập thuộc tính trình xử lý sự kiện.

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

onpageshow = (event) => { }

Kiểu sự kiện

A PageTransitionEvent. Inherits from Event.

Event properties

PageTransitionEvent.persisted Read only: Indicates if the document is loading from a cache.

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>