报告

报告 API 的 Report 接口表示单个报告。

可以通过多种方式访问报告

  • 通过 ReportingObserver.takeRecords() 方法 - 此方法会返回观察者报告队列中的所有报告，然后清空队列。
  • 通过在创建新的观察者实例时传递到 ReportingObserver() 构造函数的回调函数的 reports 参数。这包含观察者报告队列中当前包含的报告列表。
  • 通过向 Reporting-Endpoints HTTP 头中定义的端点发送请求。

实例属性

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() 构造函数中设置了事件处理程序，因此现在我们可以单击按钮以显示报告详细信息。

image of a jolly bearded man with various stats displayed below it about a deprecated feature

报告详细信息通过 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 结构遍历报告正文中的每个条目，在列表项中显示每个键值对。

规范

规范
报告 API
# dom-report

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅