Window: pageshow-Event
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das pageshow-Event wird an ein Window gesendet, wenn der Browser zu einem neuen Dokument navigiert.
Dies umfasst:
- Initiales Laden der Seite.
- Navigieren zur Seite von einer anderen Seite im gleichen Fenster oder Tab.
- Wiederherstellen einer eingefrorenen Seite auf mobilen Betriebssystemen.
- Zurückkehr zur Seite mittels der Vorwärts- oder Rückwärtsbuttons des Browsers (einschließlich wenn sie aus dem bfcache wiederhergestellt wird).
- Öffnen einer Seite in einem Hintergrund-Tab.
- Prerendern einer Seite, noch bevor diese aktiviert wird.
Warnung:
Trotz des Namens wird das pageshow-Event nicht ausgelöst, wenn die Seite tatsächlich dem Benutzer gezeigt wird. Zum Beispiel könnte sie in einem Hintergrund-Tab geöffnet oder prerendert werden. Wenn Sie interessiert daran sind zu reagieren, wenn die Seite dem Benutzer gezeigt wird, nutzen Sie die folgenden Ereignisse:
pagereveal: Wird gesendet, wenn eine Seite erstmals gerendert wird.visibilitychange: Wird jedes Mal gesendet, wenn sich die Sichtbarkeit einer Seite ändert.prerenderingchange: Wird gesendet, wenn eine prerendered Seite aktiviert wird.
Hinweis:
Während des initialen Seitenladens wird das pageshow-Event nach dem load-Event ausgelöst.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("pageshow", (event) => { })
onpageshow = (event) => { }
Ereignistyp
Ein PageTransitionEvent. Erbt von Event.
Event-Handler-Aliase
Zusätzlich zur Window-Schnittstelle ist die Event-Handler-Eigenschaft onpageshow ebenfalls auf folgenden Zielen verfügbar:
Beispiele
Dieses Beispiel richtet Event-Handler für Ereignisse ein, die im Array events aufgelistet sind. 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
| Spezifikation |
|---|
| HTML # event-pageshow |