Report - 代表单个报告

Report 是 Reporting API 的接口，代表单个报告。

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

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

属性

Report.body 只读

报告的正文，是包含详细报告信息的 ReportBody 对象。

Report.type 只读

生成的报告类型，例如 deprecation 或 intervention。

Report.url 只读

生成报告的文档的 URL。

方法

此接口上未定义任何方法。

事件

此接口没有触发任何事件。

实例

在我们的 deprecation_report.html 实例中，我们创建了一个简单的报告观察器，以观察网页上废弃的功能的使用情况：

let options = {
  types: ['deprecation'],
  buffered: true
}

let observer = new ReportingObserver(function(reports, observer) {
  reportBtn.onclick = () => displayReports(reports);
}, options);

然后，我们告诉它开始使用 ReportingObserver.observe() 观察报告。这告诉观察者开始在其报告队列中收集报告，并运行在构造函数中指定的回调函数：

observer.observe();

由于我们在 ReportingObserver() 构造函数中设置了事件处理程序，因此我们现在可以单击该按钮以显示报告详细信息。

通过 displayReports() 功能显示报告详细信息，该功能将观察者回调的 reports 参数作为其参数：

function displayReports(reports) {
  const outputElem = document.querySelector('.output');
  const list = document.createElement('ul');
  outputElem.appendChild(list);

  for(let i = 0; i < reports.length; i++) {
    let listItem = document.createElement('li');
    let textNode = document.createTextNode('报告 ' + (i + 1) + '，类型：' + reports[i].type);
    listItem.appendChild(textNode);
    let innerList = document.createElement('ul');
    listItem.appendChild(innerList);
    list.appendChild(listItem);

    for (let key in reports[i].body) {
      let innerListItem = document.createElement('li');
      let keyValue = reports[i].body[key];
      innerListItem.textContent = key + ': ' + keyValue;
      innerList.appendChild(innerListItem);
    }
  }
}

reports 参数包含观察者报告队列中所有报告的数组。我们使用基本的 for 循环遍历每个报表，然后使用 for...in 结构，在列表项中显示每个键 / 值对。

规范

规范	状态	备注
Unknown Report 的定义	Unknown	-

桌面浏览器兼容性

暂无兼容数据

相关链接

• Reporting API