Report
注意：此功能在 Web Workers 中可用。
Report 介面是 Reporting API 的一部分，代表一個單獨的報告。
可以透過多種方式訪問報告：
- 透過
ReportingObserver.takeRecords()方法 — 該方法會返回觀察者報告佇列中的所有報告，然後清空佇列。 - 透過在建立新的觀察者例項時傳遞給
ReportingObserver()建構函式的事件處理函式中的reports引數。該引數包含觀察者報告佇列中當前存在的報告列表。 - 透過向透過
Reporting-EndpointsHTTP 標頭定義的端點發送請求。
例項屬性
Report.body只讀-
報告的正文，它是一個
ReportBody物件，包含詳細的報告資訊。 Report.type只讀-
生成的報告的型別，例如
deprecation或intervention。 Report.url只讀-
生成報告的文件的 URL。
例項方法
此介面沒有定義任何方法。
事件
此介面沒有觸發任何事件。
示例
在我們 deprecation_report.html 示例中，我們建立了一個簡單的報告觀察者來觀察我們網頁上已棄用功能的使用情況。
js
const options = {
types: ["deprecation"],
buffered: true,
};
const observer = new ReportingObserver((reports, observer) => {
reportBtn.onclick = () => displayReports(reports);
}, options);
然後，我們告訴它使用 ReportingObserver.observe() 開始觀察報告；這告訴觀察者開始在其報告佇列中收集報告，並執行建構函式中指定的函式。
js
observer.observe();
由於我們在 ReportingObserver() 建構函式中設定了事件處理程式，因此現在可以單擊按鈕來顯示報告詳細資訊。
報告詳細資訊透過 displayReports() 函式顯示，該函式將觀察者回調的 reports 引數作為其引數。
js
function displayReports(reports) {
const outputElem = document.querySelector(".output");
const list = document.createElement("ul");
outputElem.appendChild(list);
reports.forEach((report, i) => {
let listItem = document.createElement("li");
let textNode = document.createTextNode(
`Report ${i + 1}, type: ${report.type}`,
);
listItem.appendChild(textNode);
let innerList = document.createElement("ul");
listItem.appendChild(innerList);
list.appendChild(listItem);
for (const key in report.body) {
const innerListItem = document.createElement("li");
const keyValue = report.body[key];
innerListItem.textContent = `${key}: ${keyValue}`;
innerList.appendChild(innerListItem);
}
});
}
reports 引數包含觀察者報告佇列中所有報告的陣列。我們使用 forEach() 迴圈遍歷每個報告，然後使用 for...in 結構遍歷報告正文中每個條目，將每個鍵/值對顯示在列表項中。
規範
| 規範 |
|---|
| Reporting API # dom-report |
瀏覽器相容性
載入中…
另見
- Reporting API
Report-ToHTTP 標頭