这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
信标
interface schedules an asynchronous and non-blocking request to a web server.
POST
and do not require a response.
This document contains examples of the Beacon interfaces. See
Beacon API
for an overview.
The Beacon API's
Navigator.sendBeacon()
method sends a
beacon
request to the server in the
global browsing context
. The method takes two arguments: the
URL
和
data
to send. The
data
argument is optional and its type may be an
ArrayBufferView
,
Blob
,
DOMString
，或
FormData
.
If the browser successfully queues the request for delivery, the method returns
true
并返回
false
否则。
The following example specifies a handler for the
load
and
beforeunload
events. The handler calls
sendBeacon()
with the current URL.
window.onload = window.onunload = function analytics(event) {
if (!navigator.sendBeacon) return;
var url = "https://example.com/analytics";
// Create the data to send
var data = "state=" + event.type + "&location=" + location.href;
// Send the beacon
var status = navigator.sendBeacon(url, data);
// Log the data and result
console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
};
The following example creates a
submit
handler and when that event is fired, the handler calls
sendBeacon()
.
window.onsubmit = function send_analytics() {
var data = JSON.stringify({
location: location.href,
time: Date()
});
navigator.sendBeacon('/analytics', data);
};
The Beacon API's
WorkerNavigator.sendBeacon()
method works identically to the usual method, but is accessible from
worker global scope
.
In the following example, a
Worker
sends a beacon using the URL and data from the global context.
This code snippet is for the global context:
function worker_send(url, data) {
// Create the worker object
var myWorker = new Worker("worker-using.js");
// Send the worker the URL and data to beacon
myWorker.postMessage([url, data]);
// Set up a message handler to receive the success/fail message from the worker
myWorker.onmessage = function(event) {
var msg = event.data;
// Log worker's send status
console.log("Worker reply: sendBeacon() status = " + msg);
};
}
This code snippet is for the worker (
worker-using.js
):
onmessage = function(event) {
var msg = event.data;
// Split the URL and data from the message
var url = msg[0];
var data = msg[1];
// If the browser supports worker sendBeacon(), then send the beacon; otherwise
// return failure message to the global context
if (self.navigator.sendBeacon) {
var status = self.navigator.sendBeacon(url, data);
postMessage(status ? "success" : "fail");
} else {
postMessage("Worker: self.navigator.sendBeacon is unsupported");
}
}
Beacon API
(Overview)