首页 > 其他分享 >Navigator.sendBeacon()

Navigator.sendBeacon()

时间:2023-04-23 12:32:16浏览次数:43  
标签:Web 数据 发送 sendBeacon Navigator data navigator

navigator.sendBeacon() 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。

这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送。

它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。

语法

navigator.sendBeacon(url);
navigator.sendBeacon(url, data);

参数

返回值

当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false

特点

  • 数据发送是可靠的
  • 数据传输是异步的
  • 不影响下一次导航的载入

示例

示例代码使用 visibilitychange 事件来调用 sendBeacon() 以发送统计数据。

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

浏览器兼容性

Navigator.sendBeacon()_sendBeacon



标签:Web,数据,发送,sendBeacon,Navigator,data,navigator
From: https://blog.51cto.com/jikun/6217063

相关文章

  • 解决http下navigator.clipboard为undefined的问题
    clipboard只有在安全域名下才可以访问(https、localhost),而http域名下只能得到undefined。例如现在想要实现点击"分享"按钮,将当前页面的url复制到剪贴板:constclipboard=navigator.clipboardif(clipboard){clipboard.writeText(window.location.href)}在本......
  • mac版anaconda navigator无法打开
    https://docs.anaconda.com/navigator/troubleshooting/#id6 终端输入conda info 或者直接试试: sudorm-rf.continuum https://blog.csdn.net/JasonWho_sysu/article/details/90413625/在终端中输入psaux|grepanaconda-navigator在终端中输入kill-9PID 本......
  • 使用navigator.geolocation解决h5公众号定位不准确的问题
    封装js(utils/geolocation.min.js):window.qq=window.qq||{},qq.maps=qq.maps||{},window.soso||(window.soso=qq),soso.maps||(soso.maps=qq.maps),qq.maps.Geolocation=function(){"usestrict";vare=[],t=null,o=0,n="_geoIframe_"+Math.ceil(1e7*Mat......
  • 使用navigator.userAgent 判断当前浏览器所处的环境
    https://blog.csdn.net/banana960531/article/details/86572475浏览器对于我们来说,可能是最熟悉的工具了。熟知的浏览器Firefox、Opera、Safari、IE、Chrome以外,据说世界上还有近百种浏览器。通常在开发的时候要做到兼容各种浏览器,因此提炼出判断浏览器类型及系统是很重要的。先......
  • DBNaVigator组件的使用方法
    DBNavigator组件用于在数据集进行记录导航,当用户单击DBNaVigator组件的某个按钮时,可实现记录指针的前移、后移,插入‘删除、修改当前记录等操作,而无须编写任何程序代码。......
  • navigator
    <navigatorurl="/pages/list/list">新闻列表</navigator>注意:绝对路径前面前面要加一个/创建文件是scss类型的最后路径的结尾不能加.vue ......
  • flutter系列之:Navigator的高级用法
    目录简介namedroutes给namedroute传参数从Screen返回值向Screen传值总结简介上篇文章我们讲到了flutter中navigator的基本用法,我们可以使用它的push和pop方法来进行Rou......
  • button、image、navigator组件
         ......
  • 微信小程序:点击navigator标签有阴影
    点击图片,发现右侧和下侧有阴影,效果如下:错误代码:<navigatorurl="/pages/overview/overview?title=荆州介绍"open-type="navigate"><im......
  • Cloudera Manager和Cloudera Navigator使用的端口
    ¶下图概述了ClouderaManager,ClouderaNavigator和ClouderaManagementService角色使用的某些端口:转载于:https://wiki.amoscloud.com/zh/Bigdata/BigdataPlatform/......