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:

Erstmaliges Laden der Seite
Navigation zur Seite von einer anderen Seite im selben Fenster oder Tab
Wiederherstellen einer eingefrorenen Seite auf mobilen Betriebssystemen
Rückkehr zur Seite mit den Vorwärts- oder Rückwärts-Schaltflächen des Browsers

Hinweis: Beim erstmaligen Laden der Seite wird das pageshow-Ereignis nach dem load-Ereignis ausgelöst.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandler-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.

Alias-Ereignisbehandler

Zusätzlich zur Window-Schnittstelle ist die Ereignisbehandler-Eigenschaft onpageshow auch bei den folgenden Zielen verfügbar:

Dieses Beispiel richtet Ereignisbehandler für die im Array events aufgeführten Ereignisse ein. Der Behandler eventLogger() protokolliert die Art des aufgetretenen Ereignisses in der Konsole und enthält den Wert der persisted-Markierung 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 # event-pageshow

Browser-Kompatibilität

Siehe auch

pagehide