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