当前位置：文江博客知识库简体中文文档 Web API Beacon_API Using_the_Beacon_API

使用 Beacon API - Web API 接口参考编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Beacon 接口用来调度向 Web 服务器发送的异步非阻塞请求。

Beacon 请求使用 HTTP POST 方法，并且不需要有响应。
Beacon 请求能确保在页面触发 unload 之前完成初始化。

这篇文档包含了 Beacon 接口的一些例子，可以在 Beacon API 查阅对应的 API。

Navigator.sendBeacon()

Beacon API 的 Navigator.sendBeacon() ，会在全局上下文中向服务器发起一个 beacon 请求。这个方法需要两个参数: URL 以及要发送的数据 data 。其中 data 参数是可选的，它的类型可以为 ArrayBufferView, Blob, DOMString, 或者 FormData.

如果浏览器成功地将 beacon 请求加入到待发送的队列里，这个方法将会返回 true ，否则将会返回 false 。

下面的例子注册了 load 事件和 beforeunload 事件的回调函数，并且在回调函数里面调用了 sendBeacon() 方法。

window.onload = window.onunload = function analytics(event) {
  if (!navigator.sendBeacon) return;

  var url = "https://example.com/analytics";
  // 创建待发送数据
  var data = "state=" + event.type + "&location=" + location.href;

  // 发送beacon请求
  var status = navigator.sendBeacon(url, data);

  // 打印数据以及结果
  console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};

接下来的例子创建了一个 submit 事件的回调函数，并且当submit事件触发时，调用 sendBeacon()方法。

window.onsubmit = function send_analytics() {
  var data = JSON.stringify({
    location: location.href,
    time: Date()
  });

  navigator.sendBeacon('/analytics', data);
};

WorkerNavigator.sendBeacon()

Beacon API 的 WorkerNavigator.sendBeacon() 的使用方法，跟平常的使用方法完全相同，区别仅在与这个方法存在 worker 全局作用域 中

接下来的例子展示了，使用 Worker 发送了一个 beacon 请求，使用了全局上下文的 URL 和数据。

这是全局上下文的代码片段:

function worker_send(url, data) {
  // 创建 worker 对象
  var myWorker = new Worker("worker-using.js");

  // 向 worker 发送 URL 以及 data
  myWorker.postMessage([url, data]);

  // 注册回调函数接收来自 worker 的成功或失败信息
  myWorker.onmessage = function(event) {
    var msg = event.data;
    // 打印 worker 的发送状态
    console.log("Worker reply: sendBeacon() status = " + msg);
  };
}

这是 worker 中的代码片段 (worker-using.js):

onmessage = function(event) {
  var msg = event.data;
  // 从 msg 中分离 URL 和 data
  var url = msg[0];
  var data = msg[1];

  // 如果浏览器支持在 worker 里面调用 sendBeacon()， 那就发送beacon请求
  // 否则返回失败信息给全局上下文
  if (self.navigator.sendBeacon) {
    var status = self.navigator.sendBeacon(url, data);
    postMessage(status ? "success" : "fail");
  } else {
    postMessage("Worker: self.navigator.sendBeacon is unsupported");
  }
}