Window: pageshow-Ereignis
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-Ereignis wird an ein Window gesendet, wenn der Browser zu einem neuen Dokument navigiert.
Dies umfasst:
- Das erstmalige Laden der Seite.
- Die Navigation von einer anderen Seite im selben Fenster oder Tab zu dieser Seite.
- Die Wiederherstellung einer eingefrorenen Seite auf mobilen Betriebssystemen.
- Die Rückkehr zur Seite über die Vorwärts- oder Zurück-Schaltfläche des Browsers (auch bei einer Wiederherstellung aus dem bfcache).
- Das Öffnen einer Seite in einem Hintergrund-Tab.
- Das Prerendering einer Seite, noch bevor sie aktiviert wird.
Warnung:
Trotz seines Namens wird das pageshow-Ereignis nicht ausgelöst, wenn die Seite dem Benutzer tatsächlich angezeigt wird. Beispielsweise kann sie in einem Hintergrund-Tab geöffnet oder vorgerendert werden. Wenn Sie darauf reagieren möchten, dass die Seite dem Benutzer angezeigt wird, verwenden 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 vorgerenderte Seite aktiviert wird.
Hinweis:
Beim erstmaligen Laden der Seite wird das pageshow-Ereignis nach dem load-Ereignis ausgelöst.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("pageshow", (event) => { })
Alternativ können Sie die Event-Handler-Property der Schnittstelle zuweisen:
onpageshow = (event) => { }
Ereignistyp
Ein PageTransitionEvent. Erbt von Event.
Event-Handler-Aliasse
Neben der Window-Schnittstelle ist die Event-Handler-Property onpageshow auch für die folgenden Ziele verfügbar:
Beispiele
Dieses Beispiel richtet Event-Handler für die im Array events aufgeführten Ereignisse ein. Der Handler eventLogger() protokolliert den Typ des aufgetretenen Ereignisses in der Konsole und gibt bei pageshow- und pagehide-Ereignissen auch den Wert des Flags persisted aus.
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>
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # event-pageshow |