文件：prerenderingchange 事件
當預渲染的文件被啟用（即使用者檢視該頁面）時，會在該文件上觸發 prerenderingchange 事件。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("prerenderingchange", (event) => { })
onprerenderingchange = (event) => { }
事件型別
一個通用的 Event。
示例
阻止在預渲染期間執行程式碼
此示例展示瞭如何將原本會在預渲染期間執行的程式碼延遲到頁面啟用後執行。這對於延遲分析程式碼很有用，因為分析程式碼只有在使用者實際檢視頁面時才相關。
程式碼使用 Document.prerendering 檢查預渲染是否正在進行，如果正在進行，則新增一個事件監聽器，在頁面啟用後執行分析初始化函式。對於未進行預渲染的頁面，分析程式碼會立即執行。
js
if (document.prerendering) {
document.addEventListener("prerenderingchange", initAnalytics, {
once: true,
});
} else {
initAnalytics();
}
請注意，不應使用此類程式碼來衡量預渲染的啟用次數，因為程式碼可能會在預渲染頁面已經啟用後才執行。
注意： 有關您可能希望延遲到預渲染完成後執行的操作型別的更多資訊，請參閱 Speculation Rules 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");
}
規範
| 規範 |
|---|
| 預渲染改版 # eventdef-document-prerenderingchange |
| 預渲染改版 # dom-document-onprerenderingchange |
瀏覽器相容性
載入中…