你知道关闭页面时怎么向后台发送消息吗？

需求

这两天碰到一个需求：在用户刷新页面或者关闭页面的时候，前端要给后台发一条请求，释放该页面的授权占用。

分析了一下，这不就是在页面卸载时发请求嘛，三下五除二就实现一版：

window.addEventListener("beforeunload", () => {let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "编程三昧"}));

测试发现：

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

既然异步 Ajax 不行，那就试试同步的吧，结果直接报错了：

搜了一下，解释如下：

Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.

概括起来就是：对现在的 Chrome 来说，在页面导航离开或者被用户关闭时，不允许发送同步 XHR 请求，涉及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。

虽然问题没解决，但是却长知识了，这波不太亏！

navigator.sendBeacon()

后来通过搜索，看到有一个接口是专门来干这事的，那就是 navigator.sendBeacon() 。

描述

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。

语法

navigator.sendBeacon(url, data);

参数

url 表明 data 将要被发送到的网络地址。
data 参数是将要发送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 类型的数据。

返回值

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

实现

既然有了接口，那实现起来就简单了。

代码

 window.addEventListener("beforeunload", (e) => {const data = {name: "编程三昧"};window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});

效果

不管是刷新页面还是关闭页面，后台都能接收到前端发送过来的请求，完美实现需求。

总结

浏览器现在功能越来越强大，支持的 API 也越来越丰富，放在之前很难实现的功能，现在可能就是轻而易举的事，还是要多关注技术动态。

~本文完，感谢阅读！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

你知道关闭页面时怎么向后台发送消息吗？相关推荐

session 安全问题（关闭页面时自动清除session）
要是直接关闭浏览器,并不直接触发SESION_ONEND事件,因此为了安全的需要,就需要调用页面关闭触发的事件onUnload ,利用这个事件来执行一个函数.在函数中调用session.abandon ...
js 关闭页面时弹框提醒
关闭页面时弹框提醒在做vue项目时一个可编辑的详情页面需要在离开它的时候,根据页面是否改动的情况来判断是否要离开页面,一开始我只是在beforeRouteLeave里面调用的==window.con ...
关闭页面时向后台发送消息
语法: navigator.sendBeacon(url, data); 返回值: 当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false. 代码: ...
关闭页面时执行“退出”的解决方案
在有些应用中我们需要实时的更新站点用户是否在线的状态.比如一些论坛里的在线成员实时显示,或基于网页的聊天.会议系统等.这种情况下,如果用户点击"退出"按钮或链接,我们将之行一系列后 ...
JavaScript的onunload()方法在关闭页面时不执行
以下仅确定适用于IE11. 解决办法:将onunload()方法换为onbeforeunload(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
Taro关闭页面时停止计时器
1.在data中定义Loadingtime:'' constructor () {super(...arguments)this.state = {djsTime:3, // 倒计时时间Loading ...
vue关闭页面时停止计数器
vue启动停止setInterval data () {return {clearTimeSet:null,} }, mounted () {// 启动this.clearTimeSet = setI ...
一个按键精灵后台发送消息的脚本
以前,我也用过按键精灵写过一些脚本,那时候经常用这个来挂机FB什么的. 那天,某网友问起,于是就回答了下无非就是,抓句柄,然后相对定位坐标或者发送消息到固定窗体代码如下: 1 //抓窗口句柄// ...
easyui弹出窗关闭前调用确认窗口,先关闭页面后调用弹出窗口
弹出窗关闭的时候提示是否关闭,同时进行一些对应的方法调用, 然而在进行页面关闭调用的时候,往往页面关闭了,才弹出确认对话框, $.messager.confirm和panel的onBeforeClos ...

你知道关闭页面时怎么向后台发送消息吗？

需求

navigator.sendBeacon()

描述

语法

参数

返回值

实现

代码

效果

总结

你知道关闭页面时怎么向后台发送消息吗？相关推荐

最新文章

热门文章