Window: pageshow Ereignis

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.

Das pageshow Ereignis wird an ein Window gesendet, wenn der Browser das Dokument des Fensters aufgrund von Navigation anzeigt.

Dies schließt ein:

  • Erster Ladevorgang der Seite
  • Navigation zur Seite von einer anderen Seite im selben Fenster oder Tab
  • Wiederherstellung einer eingefrorenen Seite auf mobilen Betriebssystemen
  • Rückkehr zur Seite über die Vorwärts- oder Rückwärts-Schaltflächen des Browsers

Hinweis: Beim ersten Laden der Seite tritt das pageshow Ereignis nach dem load Ereignis auf.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

Ereignistyp

Ereigniseigenschaften

PageTransitionEvent.persisted Schreibgeschützt

Gibt an, ob das Dokument aus einem Cache geladen wird.

Ereignis-Handler Aliase

Zusätzlich zur Window Schnittstelle steht die Ereignis-Handler-Eigenschaft onpageshow auch auf den folgenden Zielen zur Verfügung:

Beispiele

Dieses Beispiel richtet Ereignis-Handler für die in dem Array events aufgeführten Ereignisse ein. Der Handler, eventLogger(), protokolliert den Typ des aufgetretenen Ereignisses in die Konsole und enthält den Wert des persisted Flags bei pageshow und pagehide Ereignissen.

JavaScript

js
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>

Ergebnisse

Spezifikationen

Specification
HTML
# event-pageshow

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pageshow event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch