diff options
author | Florian Merz <me@fiji-flo.de> | 2021-03-08 22:37:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-03-08 22:37:08 +0100 |
commit | 59f1389c6023be8ec1435f8f7e55d7de5a302b5b (patch) | |
tree | 07bb735b7c0e522627185912020e74bdccd2bd38 /files/zh-cn/web | |
parent | e3d7a4ae7d79c409bbe2db23c9b0acc2f01718d4 (diff) | |
download | translated-content-59f1389c6023be8ec1435f8f7e55d7de5a302b5b.tar.gz translated-content-59f1389c6023be8ec1435f8f7e55d7de5a302b5b.tar.bz2 translated-content-59f1389c6023be8ec1435f8f7e55d7de5a302b5b.zip |
sync translated content
Diffstat (limited to 'files/zh-cn/web')
-rw-r--r-- | files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html | 104 |
1 files changed, 0 insertions, 104 deletions
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 ---- -<div>{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}</div> - -<p><strong><code>Beacon</code></strong> 接口用来调度向 Web 服务器发送的异步非阻塞请求。</p> - -<ul> - <li>Beacon 请求使用 HTTP <code>POST</code> 方法,并且不需要有响应。</li> - <li>Beacon 请求能确保在页面触发 unload 之前完成初始化。</li> -</ul> - -<p>这篇文档包含了 Beacon 接口的一些例子,可以在 {{domxref("Beacon_API","Beacon API")}} 查阅对应的 API。</p> - -<h2 id="Navigator.sendBeacon">Navigator.sendBeacon()</h2> - -<p>Beacon API 的 {{domxref("Navigator.sendBeacon()")}} ,会在<em>全局上下文</em>中向服务器发起一个 <em>beacon</em> 请求。这个方法需要两个参数: <code>URL</code> 以及要发送的数据 <code>data</code> 。其中 <code>data</code> 参数是可选的,它的类型可以为 {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, 或者 {{domxref("FormData")}}.</p> - -<p>如果浏览器成功地将 beacon 请求加入到待发送的队列里,这个方法将会返回 <code>true</code> ,否则将会返回 <code>false</code> 。</p> - -<p>下面的例子注册了 {{event("load")}} 事件和 {{event("beforeunload")}} 事件的回调函数, 并且在回调函数里面调用了 <code>sendBeacon()</code> 方法。</p> - -<pre class="brush: js">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); -}; -</pre> - -<p>接下来的例子创建了一个 {{event("submit")}} 事件的回调函数,并且当submit事件触发时,调用 <code>sendBeacon()</code>方法。</p> - -<pre class="brush: js">window.onsubmit = function send_analytics() { - var data = JSON.stringify({ - location: location.href, - time: Date() - }); - - navigator.sendBeacon('/analytics', data); -}; -</pre> - -<h2 id="WorkerNavigator.sendBeacon">WorkerNavigator.sendBeacon()</h2> - -<p>Beacon API 的 {{domxref("WorkerNavigator.sendBeacon()")}} 的使用方法,跟平常的使用方法完全相同,区别仅在与这个方法存在 <em>{{domxref("WorkerGlobalScope","worker 全局作用域")}} </em>中</p> - -<p>接下来的例子展示了,使用 {{domxref("Worker")}} 发送了一个 beacon 请求,使用了全局上下文的 URL 和数据。</p> - -<p>这是全局上下文的代码片段:</p> - -<pre class="brush: js">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); - }; -} -</pre> - -<p>这是 worker 中的代码片段 (<code>worker-using.js</code>):</p> - -<pre class="brush: 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"); - } -} -</pre> - -<h2 id="查看更多">查看更多</h2> - -<ul> - <li>{{domxref("Beacon_API","Beacon API")}} (概览)</li> - <li><a href="https://w3c.github.io/beacon/">Beacon 标准</a></li> - <li><a href="http://caniuse.com/#search=beacon">Beacon CanIUse 数据</a></li> -</ul> |