关闭页面向后台发送消息

场景描述

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

最初的代码

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

经过测试

刷新页面时基本满足需求(偶尔也会有后台接收不到请求的现象,但概率很低)
关闭页面时,后台接收不到请求
哦豁,尴尬了
navigator.sendBeacon() 
这个方法主要用于满足统计和,
这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据
使用方式: navigator.sendBeacon(url, data);
说明:
url 参数表明 data 将要被发送到的网络地址。
data 参数是将要发送的 ArrayBufferViewBlobDOMString 或者 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));
});

posted @   南风晚来晚相识  阅读(168)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
历史上的今天:
2020-08-19 你必须知道的深层选择器
点击右上角即可分享
微信分享提示