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

252 阅读1分钟

在用户刷新或关闭页面的时候,需要发送给后端一条请求传递某些信息,正常使用页面卸载的事件监听或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