- 综合排序
- 最热优先
- 最新优先
- 来自专栏云前端
用 sendBeacon 发送分析信息的优点
sendBeacon 功能简介 sendBeacon 以一种将分析信息回传给服务端而无需响应的方式被创建出来。 下面的 Chrome Network 面板截图展示了截获的从 XHR 转向 sendBeacon 工作中，发往监控服务的请求。 sendBeacon 请求被描述为 “ping” 类型，可以看到各种请求和它们之间的区别。 尽管 sendBeacon 规范 (https://www.w3.org/TR/beacon/#sec-sendBeacon-method) 没有规定数据大小，但浏览器厂商一般会限制请求体积，这样一来 sendBeacon 函数将在传输失败时返回 false ，反之则是 true。
1.6K20编辑于 2022-03-14 - 来自专栏coding个人笔记
Navigator.sendBeacon实现页面埋点统计
应该是近几年对统计的需求比重大了，浏览器已经有了草案navigator.sendBeacon()，MDN上面描述了上面方法的痛点： 这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload 这就是 sendBeacon() 方法存在的意义。使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。
2.2K10编辑于 2022-01-18 - 来自专栏前端自习课
【实战】1886- 教你怎么前端实现埋点上报
的埋点上报 Navigator.sendBeacon是目前通用的埋点上报方案，Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选 介绍 navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。 补充 sendBeacon 如果成功进入浏览器的发送队列后，会返回true；如果受到队列总数、数据大小的限制后，会返回false。 总结 前端埋点上报常使用ajax，img，navigator.sendBeacon。不推荐使用ajax。如果考虑兼容性的话，img是不二之选。 sendBeacon && url) { const isSuccess = await navigator?.
1.4K10编辑于 2023-12-06 - 来自专栏小鑫同学编程历险记
正确发送统计数据到服务器
API 介绍： navigator.sendBeacon() 方法支持我们使用 POST 的请求方式将少量的数据异步发送到服务器进行存储。 API 使用方法： 语法说明： navigator.sendBeacon(url); navigator.sendBeacon(url, data); 参数说明： 参数 说明 url 数据发送的服务器地址 当数据被成功加入传输队列后返回 true，否则返回 false 案例分析： 在会话结束时发送统计数据到服务器，我们可以监听 visibilitychange 事件，在 dom 的可见状态变为 hidden 时执行 sendBeacon 组装符合sendBeacon函数的数据参数； 监听visibilitychange； 执行发送数据； 成功插入队列将返回 true。 <! if (document.visibilityState === "hidden") { // ③ const result = navigator.sendBeacon
1.3K20编辑于 2022-12-26 - 来自专栏grain先森
如何在 Web 关闭页面时发送 Ajax 请求
方案3：使用navigator.sendBeacon发送异步请求 根据MDN的介绍： 这个方法主要用于满足 统计和诊断代码 的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据 使用方式是这样的： navigator.sendBeacon(url [, data]); sendBeacon支持发送的data可以是ArrayBufferView, Blob, DOMString, 下面是几种使用sendBeacon发送请求的方式，可以修改header和内容的格式，因为一般和服务器的通信方式都是固定的，如果修改了header或者内容，服务器就无法正常识别出来了。 blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'}); navigator.sendBeacon( var fd = new FormData(); fd.append('room_id', 123); navigator.sendBeacon("/cgi-bin/leave_room", fd);
4.2K30发布于 2019-05-10 - 来自专栏编程三昧
你知道关闭页面时怎么向后台发送消息吗？
navigator.sendBeacon() 后来通过搜索，看到有一个接口是专门来干这事的，那就是 navigator.sendBeacon() 。 语法 navigator.sendBeacon(url, data); 参数 url 表明 data 将要被发送到的网络地址。 返回值 当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。 实现 既然有了接口，那实现起来就简单了。 window.addEventListener("beforeunload", (e) => { const data = {name: "编程三昧"}; window.navigator.sendBeacon
1.4K10发布于 2021-08-16 - 来自专栏前端技术研究和应用
浅析前端监控技术
sendBeacon：该api保证页面完全卸载前将数据上报，无数据丢失风险。兼容性：除了IE，其余浏览器都广泛支持。 sendBeacon 方法位于 navigator 上，可以在浏览器中使用，调用 sendBeacon 会发送一个异步的 post 请求，这个请求可以保证在页面完成卸载前发送出去，且不会阻塞页面卸载过程 ，调用起来就很简单window.addEventListener("unload", function (e) { navigator.sendBeacon("/log", data);});Beacon sendBeacon 可以发送 ArrayBufferView, Blob, DOMString, FormData 多种数据类型。 sendBeacon 的返回值为布尔类型，表示浏览器是否成功把请求加入发送队列。Beacon API 不能在 web worker 中使用。
1.3K40编辑于 2023-04-14 - 来自专栏Vue源码 & 前端进阶体系
【兼容性】监听页面关闭发送请求
针对这个情况， navigator.sendBeacon() 方法就出现了 会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。 但是好像支持情况也不太好嘛，IE 再见了 经过实测，只有 iOS11 没有sendBeacon 这个方法，其他的 HarmonyOS ，Android，PC、iOS11以上 都能成功发送请求 但是呢， 64KB 也有可能会错误，所以使用 sendBeacon 一定要做好错误兼容哦 至于这里发送请求的兼容做法的话 如果你不在乎性能，可以先使用 sendBeacon 发送，不支持或者报错，再使用同步的 XMLHttpRequest 但是因为同步的 xhr 可能会报错，也要做好错误处理 我搜到一个开源库的sendBeacon兼容处理 https://github.com/miguelmota/Navigator.sendBeacon /blob/master/sendbeacon.js 可以参考一下
5.4K60发布于 2021-09-09 - 来自专栏前端自习课
【JS】1680- 重学 JavaScript API - Beacon API
如何使用 Beacon API 使用 Beacon API 非常简单，只需要调用 [navigator.sendBeacon()](https://developer.mozilla.org/en-US /docs/Web/API/Navigator/sendBeacon) 方法即可。 该方法语法如下： navigator.sendBeacon(url); navigator.sendBeacon(url, data); 参数包括： url url 参数表明 data 将要被发送到的目标地址 例如，以下是发送一条简单的日志记录的示例： navigator.sendBeacon("/log", "Log message"); 3. error.stack : "", }; navigator.sendBeacon("/log", JSON.stringify(data)); return true; }; 3.3 用户行为追踪
85250编辑于 2023-09-01 - 来自专栏前端小作坊
GA源代码里的小技巧之Beacon请求
这个方法本质上和跨域的XHR请求没有多大区别，但是sendBeacon方法能够确保在页面关闭的时候还能发送成功。这也是它的最大优势。 示例代码如下： function beaconPing(url, params) { if (hasSendBeacon()) { return window.navigator.sendBeacon (url, params); } else { return false; } }; 在sendBeacon出现之前，为了能够在页面关闭时发送beacon，常用的方法是两种 需要延迟关闭才能用于unload发送 sendBeacon 1. unload时更能确保成功2. 支持发送更多数据 1. POST请求消耗多2. 如果超过了则尝试使用sendBeacon方法发送beacon请求，如果不支持sendBeacon则会采用跨域XHR发送。如果跨域XHR不支持则最后fallback到图片发送。
1.6K10发布于 2018-08-01 - 来自专栏前端达人
数据埋点好帮手，这个Beacon API ，建议每位前端开发者了解下
2、发送数据：使用navigator.sendBeacon(url, data)方法发送数据。其中，url是数据发送的目标URL，data是要发送的数据。 ; var url = "https://example.com/endpoint"; navigator.sendBeacon(url, data); 3、处理数据：在服务器端，您需要准备一个接收 res.sendStatus(200); // 返回响应状态码 }); 4、确认发送：Beacon API的sendBeacon()方法返回一个布尔值，表示数据是否成功被浏览器接受和发送。 ; var url = "https://example.com/endpoint"; var result = navigator.sendBeacon(url, data); if (result 然后，我们使用Beacon API将数据发送到服务器，通过调用navigator.sendBeacon('/track', JSON.stringify(data))来发送数据。
1.4K30编辑于 2023-08-31 - 来自专栏OBKoro1的前端分享
Web Beacon 刷新/关闭页面之前发送请求
本文中提到的链接，因为微信的限制，没有显示出来，查看文中链接，需要点击最下方的阅读原文链接 修订版：主要增加了sendBeacon的内容(在后面)，值得一读 背景： 有一个任务非常耗时会消耗后台大量算力 使用： navigator.sendBeacon() 完整API： let result = navigator.sendBeacon(url, data); Beacon是挂在 navigator下面的 result是一个布尔值，代表这次发送请求的结果: 如果浏览器接受并且把请求排队了则返回 tru 如果在这个过程中出现了问题就返回 false navigator.sendBeacon接受两个参数： url FormData 并添加一个键值对 let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon 虽然现在浏览器对 sendBeacon的支持很好，我们对其做一下兼容性处理也是有必要的： if (navigator.sendBeacon) { // Beacon 代码 } else { //
2K40发布于 2020-10-27 - 来自专栏前端小码农
实现一套前端应用监控系统
SDK 版本 userId: '', // 用户 id assetsVer: '', // 页面版本(js 资源版本) }; } 上报数据 上报数据有两种方式, sendBeacon 和 img.src sendBeacon 是 POST 请求, 数据通过 body 传输, 了解sendBeacon img.src 是 GET 请求, 数据通过 url params 传输, string ts-ignore const host = TRACKER_HOST; try { // throw Error('use img'); // 使用 sendBeacon 上报, 参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon data.sendMode = 'sendBeacon'; window.navigator.sendBeacon(`${host}/${measurement}`, JSON.stringify(data));
89720发布于 2020-07-16 - 来自专栏前端LeBron
JavaScript 设计模式 —— 代理模式
而有部分项目对这块内容做了以下优化，是一个比较贴切的代理模式实践场景： Navigator.sendBeacon 使用户代理在有机会时异步地向服务器发送数据（ HTTP POST ），不影响交互性能 https ://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon 数据聚合上报（未使用代理模式优化版本为，每次 report 都使用请求上报 上报 const evts = events.splice(0, events.length); navigator.sendBeacon('/path', { events: evts data, }); }; 定量分组 const events = []; const LIMIT = 10; const reportRequest = () => { // 定量分组使用 sendBeacon 上报 const evts = events.splice(0, LIMIT); navigator.sendBeacon('/path', { events: evts }); }; const
71520编辑于 2022-11-21 - 来自专栏技术综合
JS的页面生命周期事件
我们可以在那里做一些不涉及延迟的事件，比如关闭相关的弹出窗口 可以在用户离开时, 使用unload事件发送我们想要保存在服务器上的数据 参考https://w3c.github.io/beacon/, 可以使用navigator.sendBeacon let analyticsData = { /* 收集了数据的对象 */ }; window.addEventListener("unload", function() { navigator.sendBeacon 当 sendBeacon 请求完成的时候，浏览器可能已经离开了文档，所以就没办法获取服务器的响应数据 4. window.onbeforeunload 如果访问中触发了离开页面的导航或试图关闭窗口，beforeunload
3.7K30发布于 2020-08-25 - 来自专栏前端到底怎么学好来
前端埋点上报的几种方式
Navigator.sendBeacon()：Navigator.sendBeacon()方法允许在页面卸载时异步发送数据。它通常用于在页面关闭时进行最后的数据上报，以确保数据能够成功发送。4. Navigator.sendBeacon()优点：在页面卸载时可靠地发送数据，不会阻塞页面关闭。支持在后台发送数据。缺点：只能发送POST请求，无法获取响应结果。 Navigator.sendBeacon()方法允许在页面卸载时异步发送数据。它通常用于在页面关闭时进行最后的数据上报，以确保数据能够成功发送。 const data = { event: 'unload', page: 'home' };const url = ' https://example.com/track ';navigator.sendBeacon
3K20编辑于 2023-11-16 - 来自专栏柒八九技术收纳盒
浏览器之性能指标-FID
---- navigator.sendBeacon navigator.sendBeacon 是一个用于在浏览器中发送「异步请求」的 API。 但是，navigator.sendBeacon 通过将数据放入浏览器的发送队列，允许在页面卸载时继续异步发送数据。 使用 navigator.sendBeacon 时要注意以下几点： 由于 navigator.sendBeacon 是异步执行的，它不会等待服务器的响应，因此无法得知请求是否成功。 由于 navigator.sendBeacon 发送的是 POST 请求，因此服务器端应该能够处理 POST 请求，并相应地解析数据。 ) { // 使用 sendBeacon 发送数据 const isDataSent = navigator.sendBeacon('/log', body); if (isDataSent
1.9K40编辑于 2023-08-10 - 来自专栏车联网仿真
omnet++，veins车辆间消息的传输、车辆运动信息获取
首先在头文件中声明自消息，如： cMessage* sendBeacon; 然后在.cc中initialize的stage == 0（也可以在该自消息被调度之前）中初始化自消息： sendBeacon 在给定的时间执行给定的自消息： if(strcmp(this->getParentModule()->getName(),"human") == 0){ scheduleAt(SimTime(5),sendBeacon ); } 上面表示名为human的车辆在模拟时间第5s执行sendBeacon这个自消息。 定义消息、设置内容并发送： if (msg == sendBeacon) { Beacon* beacon = new Beacon(); beacon->setVehicleId(this ,THSbeaconrate[i]); NOTE4：如果需要循环发送，如实现TDMA可以在return之前，循环调度这个自消息： scheduleAt(simTime() + frameLength,sendBeacon
91350编辑于 2023-11-01 - 来自专栏腾讯IVWEB团队的专栏
使用 WEB API Beacon 记录行为日志 （译）
使用navigator.sendBeacon() navigator.sendBeacon有两个参数。 第一个是发出请求的URL。 请求作为HTTP POST执行，发送第二个参数中提供的任何数据。 对于大多数用途，这应该没问题，但在尝试使用navigator.sendBeacon之前，需要测试是否支持。 简单的方式： if (navigator.sendBeacon) { // Beacon code 使用Beacon的方式 } else { // No Beacon. navigator.sendBeacon) return true; // URL to send the data to, e.g. 发送 navigator.sendBeacon(url, data); }; 最后，我们需要在用户离开页面时调用此函数。
2.1K21发布于 2020-06-28 - 来自专栏友人a的笔记丶
JS浏览器环境下各种实用API记录
navigator.clipboard.write([item]); } 原文：https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html Fetch和Navigator.sendBeacon () navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。 navigator.sendBeacon(url, data); 当用户代理成功把数据加入传输队列时，sendBeacon()?方法将会返回?true，否则返回?false。 使用? sendBeacon()?方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。
1.2K20编辑于 2023-02-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号