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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prerenderingchange event
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報