From 59f1389c6023be8ec1435f8f7e55d7de5a302b5b Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Mon, 8 Mar 2021 22:37:08 +0100 Subject: sync translated content --- .../api/beacon_api/using_the_beacon_api/index.html | 104 --------------------- 1 file changed, 104 deletions(-) delete mode 100644 files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html (limited to 'files/zh-cn/web') diff --git a/files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html b/files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html deleted file mode 100644 index c65861c7cd..0000000000 --- a/files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 使用 Beacon API -slug: Web/API/Beacon_API/Using_the_Beacon_API -tags: - - Web 性能 - - 指南 -translation_of: Web/API/Beacon_API/Using_the_Beacon_API ---- -
{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}
- -

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

- - - -

这篇文档包含了 Beacon 接口的一些例子，可以在 {{domxref("Beacon_API","Beacon API")}} 查阅对应的 API。

- - - -

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

- -

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

- -

下面的例子注册了 {{event("load")}} 事件和  {{event("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);
-};
-
- -

接下来的例子创建了一个 {{event("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 的 {{domxref("WorkerNavigator.sendBeacon()")}} 的使用方法，跟平常的使用方法完全相同，区别仅在与这个方法存在 {{domxref("WorkerGlobalScope","worker 全局作用域")}} 中

- -

接下来的例子展示了，使用  {{domxref("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");
-  }
-}
-
- -

查看更多

- - -- cgit v1.2.3-54-g00ecf