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 Nur lesbar

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 Standard
# event-pageshow

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch