Navigator.sendBeacon()

用户卸载网页的时候，有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面，使用XMLHttpRequest对象发送数据。但是，这样做不是很可靠，因为XMLHttpRequest对象是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。

解决方法就是 AJAX 通信改成同步发送，即只有发送完成，页面才能卸载。但是，很多浏览器已经不支持同步的 XMLHttpRequest 对象了（即open()方法的第三个参数为false）。

window.addEventListener('unload', logData, false);function logData() {var client = new XMLHttpRequest();// 第三个参数表示同步发送client.open('POST', '/log', false);client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');client.send(analyticsData);
}

上面代码指定XMLHttpRequest同步发送，很多浏览器都已经不支持这种写法。

同步通信有几种变通的方法。一种做法是新建一个元素，数据放在src属性，作为 URL 的查询字符串，这时浏览器会等待图片加载完成（服务器回应），再进行卸载。另一种做法是创建一个循环，规定执行时间为几秒钟，在这几秒钟内把数据发出去，然后再卸载页面。

这些做法的共同问题是，卸载的时间被硬生生拖长了，后面页面的加载被推迟了，用户体验不好。

使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多！

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

Navigator.sendBeacon方法接受两个参数，第一个参数是目标服务器的 URL，第二个参数是所要发送的数据（可选），可以是任意类型（字符串、表单对象、二进制对象等等）。

navigator.sendBeacon(url, data)

这个方法的返回值是一个布尔值，成功发送数据为true，否则为false。

该方法发送数据的 HTTP 方法是 POST，可以跨域，类似于表单提交数据。它不能指定回调函数。

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

Navigator.sendBeacon()相关推荐

Navigator对象
Navigator对象 Navigator对象表示用户代理的状态和标识,其允许脚本查询它和注册自己进行一些活动,可以使用只读的window.navigator属性取得实例化的navigator对象的引 ...
使用sendBeacon进行前端数据上报
前言最近接到一个需求,需要统计页面的相关数据,并进行上报,本文就介绍一下数据上报的一些方法. 上报数据的时机页面加载时此时进行数据上报,只需要在页面 load 时上报即可. window.add ...
BOM系列之Navigator对象
文章の目录 1.Navigator是什么 2.属性 2.1.buildID 2.1.1.概述 2.1.2.语法 2.1.3.返回值 2.2.clipboard 2.2.1.概述 2.2.2.语法 2. ...
alert 返回页面刷新_详解 HTML 页面原生的生命周期事件
DOMContentLoaded,load,beforeunload,unload HTML 页面的生命周期包含三个重要事件: DOMContentLoaded -- 浏览器已完全加载 HTML,并构 ...
通过页面埋点做监控却不影响性能？解密ARMS前端监控数据上报技术内幕
摘要: 本文将为您介绍,在采集多类日志数据的情况下,阿里云业务实时监控服务(ARMS)之前端监控如何优化日志上报前端监控 (又叫UEM,User Experience Management, 用户体 ...
前端处理带t的时间_大厂实践：如何优雅的监控前端页面性能
前言前端页面性能是一个非常核心的用户体验指标.本文介绍岳鹰全景监控平台如何设计一个通用.低侵入性.自动上报的页面性能监控方案.主要采用的是Navigation Timing API以及sendB ...
统计上报---日志上报成功率高的方式
1.使用图片信标这项技术非常类似动态脚本注入. 使用JavaScript创建一个新的Image对象, 并把src属性设置为服务器上的脚本URL. 该URL包含了我们要通过GET传回的键值对数据. 请 ...
mPaas-WKWebview网络拦截常见问题
简介:mPaas-WKWebview网络拦截常见问题 1. 背景原生WKWebView在独立于app进程之外的进程中执行网络请求,请求数据不经过主进程,因此在 WKWebView 上直接使用NSUR ...
[NOTE] WebGoat v8.2.2学习笔记
[NOTE] WebGoat v8.2.2学习笔记文章目录 [NOTE] WebGoat v8.2.2学习笔记前言 CIA 常见编码形式 OpenSSL使用 docker安全 SQL安全 SQLi ...
用框架的你，可能早已忽略了这些事件API
DOMContentLoaded,load,beforeunload,unload HTML 页面的生命周期包含三个重要事件: DOMContentLoaded -- 浏览器已完全加载 HTML,并构 ...

Navigator.sendBeacon()

Navigator.sendBeacon()相关推荐

最新文章

热门文章