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.

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

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

js
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