Dokument: prerenderingchange Ereignis
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Das prerenderingchange
-Ereignis wird bei einem vorab gerenderten Dokument ausgelöst, wenn es aktiviert wird (d. h. der Benutzer die Seite betrachtet).
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("prerenderingchange", (event) => {});
prerenderingchange = (event) => {};
Ereignistyp
Ein generisches Event
.
Beispiele
Verhindern von Codeausführung während des Prerenderings
Das Beispiel zeigt, wie man Code zurückstellen kann, der ansonsten während des Prerenderings ausgeführt würde, bis nach der Aktivierung der Seite. Dies ist nützlich, um Analysecode zu verschieben, der nur relevant ist, wenn und falls die Seite tatsächlich betrachtet wird.
Der Code überprüft, ob das Prerendering läuft, indem er Document.prerendering
verwendet. Falls ja, wird ein Event-Listener hinzugefügt, der eine Analyse-Initialisierungsfunktion ausführt, sobald die Seite aktiviert wird.
Auf einer Seite, die nicht vorgerendert wird, wird der Analysecode sofort ausgeführt.
if (document.prerendering) {
document.addEventListener("prerenderingchange", initAnalytics, {
once: true,
});
} else {
initAnalytics();
}
Beachten Sie, dass dieser Code nicht verwendet werden sollte, um zu messen, wie oft ein Prerender aktiviert wird, da der Code möglicherweise ausgeführt wird, nachdem eine vorgerenderte Seite bereits aktiviert wurde.
Hinweis: Sehen Sie sich die Speculation Rules API Übersichtsseite an, insbesondere den Abschnitt Unsichere spekulative Ladebedingungen, um mehr über die Arten von Aktivitäten zu erfahren, die Sie möglicherweise verzögern möchten, bis das Prerendering abgeschlossen ist.
Messen von Prerendering-Aktivierungen
Dieser Code zeigt, wie man misst, wie oft ein Prerender aktiviert wird.
Es verwendet das prerenderingchange
, um Aktivierungsereignisse zu verfolgen, und Performance.getEntriesByType()
, um Navigationsaktivierungen zu verfolgen.
if (document.prerendering) {
document.addEventListener(
"prerenderingchange",
() => {
console.log("Prerender activated after this script ran");
},
{ once: true },
);
} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) {
console.log("Prerender activated before this script ran");
} else {
console.log("This page load was not via prerendering");
}
Spezifikationen
Specification |
---|
Prerendering Revamped # eventdef-document-prerenderingchange |
Prerendering Revamped # dom-document-onprerenderingchange |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Speculation Rules API
prerendering
EigenschaftPerformanceNavigationTiming.activationStart
Eigenschaft