关闭页面时怎样向后台发送消息

Posted 2021-09-03 66VI9HU

在用户刷新或关闭页面的时候，需要发送给后端一条请求传递某些信息，正常使用页面卸载的事件监听或vue生命周期钩子函数，如：

window.addEventListener(\'beforeunload\',()=> {
   // do something
})

但测试发现：

• 刷新页面时基本满足要求
• 关闭页面时，后台接收不到请求

搜索相关信息发现，对于现在的Chrome来说，在页面导航离开或者被用户关闭时，不允许发送同步的XHR请求，涉及到的事件有beforeunload、unload、pagehide 和 visibilitychange。

navigator.sendBeacon()

后来通过搜索发现有个接口可以实现，就是 navigator.sendBeacon()

语法

navigator.sendBeacon(url,data)

参数

• url表明data将要被发送到的网络地址。
• data参数是将要发送的数据

返回值

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