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.

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

Ereignistyp

Ein PageTransitionEvent. Erbt von Event.

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:

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

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

pagehide