Document: prerenderingchange イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

prerenderingchange イベントは、事前レンダリングされた文書がアクティブになった（ユーザーがページを閲覧した）ときに発生します。

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("prerenderingchange", (event) => {});

prerenderingchange = (event) => {};

イベント型

一般的な Event です。

例

事前レンダリング中にコードが実行されるのを防ぐ

この例は、事前レンダリング中に実行されるコードを、ページがアクティブになるまで遅延させる方法を示しています。 これは、ページが実際に閲覧された場合にのみ関連する分析コードを遅延させるのに役立ちます。

このコードは、 Document.prerendering を使用して事前レンダリングが実行中である場合、ページがアクティブ化された際にアナリティクスの初期化関数を実行するイベントリスナーを追加します。事前レンダリングを実行していないページでは、アナリティクスコードが即座に実行されます。

js
if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

この種のコードは、事前レンダリングがどの程度頻繁に起動されるかを測定するために使用すべきではありません。なぜなら、事前レンダリングされたページがすでに起動された後にコードが実行される可能性があるからです。

メモ: 事前レンダリングが完了するまで遅らせたいアクティビティの種類については、投機ルール API ランディングページ、特に安全でない投機的読み込み条件の節を参照してください。

事前レンダリングの起動を測定

このコードは、事前レンダリングがどの程度多く起動されたかを測定する方法を示しています。 事前レンダリングの起動イベントを追跡するために prerenderingchange を使用し、ナビゲーションの起動を追跡するために Performance.getEntriesByType() を使用しています。

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");
}

仕様書

Specification
Prerendering Revamped
# eventdef-document-prerenderingchange
Prerendering Revamped
# dom-document-onprerenderingchange

ブラウザーの互換性

BCD tables only load in the browser

関連情報