关闭页面向后台发送消息

当前位置:

首页 > temp > JavaScript教程 >

关闭页面向后台发送消息

场景描述

场景描述：在用户刷新页面或者关闭页面的时候，前端要给后台发一条请求，释放该页面的授权占用。

最初的代码

window.addEventListener("beforeunload", () => {
let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:8080/exit");
oReq.send(JSON.stringify({name: "南风晚来晚相识"}));

经过测试

刷新页面时基本满足需求（偶尔也会有后台接收不到请求的现象，但概率很低）
关闭页面时，后台接收不到请求
哦豁，尴尬了

navigator.sendBeacon()

navigator.sendBeacon() 
这个方法主要用于满足统计和，
这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据
使用方式： navigator.sendBeacon(url, data);
说明：
url 参数表明 data 将要被发送到的网络地址。
data 参数是将要发送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 类型的数

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

使用navigator.sendBeacon()

 window.addEventListener("beforeunload", (e) => {
    const data = {name: "南风晚来晚相识"};
    window.navigator.sendBeacon("http://127.0.0.1:8080/exit", JSON.stringify(data));
});

栏目列表