`sendBeacon` 是一个用于在网页与服务器之间异步传输小数据的 Web API,特别适用于在页面卸载时发送数据。这种方法的优点是即使用户离开页面或关闭浏览器,数据也能被可靠地发送。 ### 使用场景 - 记录分析数据(如页面浏览、用户行为等)。 - 发送用户反馈或事件数据。 - 发送数据时不影响页面的性能,尤其是在卸载期间。 ### 语法 ```javascript navigator.sendBeacon(url, data); ``` #### 参数 - **`url`**: 要发送数据的服务器端点(必须是同源或允许跨源的URL)。 - **`data`**: 可选,发送的数据,可以是 `ArrayBuffer`, `Blob`, `DOMString` 或 `FormData`。 ### 返回值 - 返回 `true` 表示请求已成功添加到发送队列,返回 `false` 表示请求失败(通常是因为目标 URL 不可达)。 ### 示例代码 ```javascript // 发送数据示例 const url = 'https://example.com/track'; const data = JSON.stringify({ action: 'page_exit', timestamp: Date.now() }); window.addEventListener('beforeunload', function() { const success = navigator.sendBeacon(url, data); console.log('Beacon sent:', success); }); ``` ### 说明 1. **事件监听**: 通过 `beforeunload` 事件监听用户离开页面的行为,在页面卸载之前调用 `sendBeacon`。 2. **数据格式**: 在这个示例中,数据被转换为 JSON 字符串以便发送。 3. **异步特性**: `sendBeacon` 方法不会阻塞页面的关闭,这意味着它不会延迟用户的离开。 ### 注意事项 - **数据大小**: `sendBeacon` 适合发送小量数据,通常不应超过 64 KB。 - **网络请求**: `sendBeacon` 会在后台发送请求,因此不需要等待响应。 - **支持性**: 现代浏览器都支持 `sendBeacon`,但在较旧的浏览器中可能不支持。 ### 小结 `sendBeacon` 提供了一种有效的方式来在页面卸载时或用户离开时发送数据,确保数据的传输不会影响用户体验。如果你需要在用户离开时记录重要的数据或事件,`sendBeacon` 是一个合适的选择。如果有其他问题或需要更详细的信息,请告诉我!