Navigator.sendBeacon()

在此页

句法
描述
规范
浏览器兼容性
另请参阅
相关话题

navigator.sendBeacon() 方法 asynchronously sends a small amount of data over HTTP to a web server.

句法

navigator.sendBeacon(url, data);

参数

url: The URL that will receive the data . Can be relative or absolute.
data: ArrayBuffer , ArrayBufferView , Blob , DOMString , FormData ，或 URLSearchParams object containing the data to send.

返回值

sendBeacon() 方法返回 true 若用户代理 successfully queued the data for transfer. Otherwise, it returns false .

描述

This method is for analytics and diagnostics that send data to a server before the document is unloaded, where sending the data any sooner may miss some possible data collection. For example, which link the user clicked before navigating away and unloading the page.

Ensuring that data has been sent during the unloading of a document has traditionally been difficult, because user agents typically ignore asynchronous XMLHttpRequest s made in an unload handler.

Historically, this was addressed with some of the following workarounds to delay the page unload long enough to send data to some URL:

Submitting the data with a blocking synchronous XMLHttpRequest call in unload or beforeunload event handlers.
Creating an <img> element and setting its src 在 unload handler. Most user agents will delay the unload to load the image.
Creating a no-op loop for several seconds in the unload handler.

All of these methods block unloading the document, which slows down the next navigation. There is nothing the next page can do to avoid this, so the new page seems slow, even though it's the previous page's fault.

The following example shows theoretical analytics code that attempts to submit data to a server with a synchronous XMLHttpRequest in an unload handler. This results in the next page load to be delayed.

window.addEventListener("unload", function logData() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
  xhr.send(analyticsData);
});

This is what sendBeacon() replaces. With the sendBeacon() method, the data is transmitted asynchronously when the User Agent has an opportunity to do so, without delaying unload or the next navigation. This solves all of the problems with submission of analytics data:

The data is sent reliably
It's sent asynchronously
It doesn't impact the loading of the next page
In addition, the code is simpler to write than any of the older techniques!

The following example shows a theoretical analytics code pattern that submits data to a server using the sendBeacon() 方法。

window.addEventListener("unload", function logData() {
  navigator.sendBeacon("/log", analyticsData);
});

The beacon sends an HTTP request via the POST method, with all relevant cookies available when called.

规范

规范	状态	注释
信标 The definition of 'sendBeacon()' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`sendBeacon`	Chrome 39 39 Starting in Chrome 59, this method cannot send a `Blob` whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283 .	Edge 14	Firefox 31	IE No	Opera 26 26 Starting in Opera 46, this method cannot send a `Blob` whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283 .	Safari 11.1	WebView Android 40 40 Starting in Chrome 59, this method cannot send a `Blob` whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283 .	Chrome Android 42 42 Starting in Chrome 59, this method cannot send a `Blob` whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283 .	Firefox Android 31	Opera Android 26 26 Starting in Opera 46, this method cannot send a `Blob` whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283 .	Safari iOS 11.3	Samsung Internet Android 4.0 4.0 Starting in Samsung Internet 7.0, this method cannot send a `Blob` whose type is not CORS safelisted. This is a temporary change until a mitigation can be found for the security issues that this creates. For more information see Chrome bug 720283 .

图例

完整支持
不支持

另请参阅

navigator

元数据

最后修改： Mar 15, 2020

在此页

句法

参数

返回值

描述

规范

浏览器兼容性

图例

另请参阅

相关话题