javascript 判断 浏览器-后端监听关闭和刷新浏览器

窃听浏览器相关事件，判断浏览器关闭和刷新事件，并向服务器上报数据

浏览器关闭或刷新相关干扰

# 浏览器关闭前
document.addEventListener("beforeUnload", () => {});
# 浏览器关闭，隐藏和tab切换
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
  } else {
  }
});
# 浏览器关闭
document.addEventListener("unload", () => {});

用户操作行为

通过用户操作浏览器复制日志发现

分析场景后javascript 判断 浏览器，我们可以通过风暴触发的时间差来判断用户的操作行为。 代码如下

let before_unload_time = 0
document.addEventListener("beforeUnload", () => {
  before_unload_time = new Date().getTime()
});
document.addEventListener("unload", () => {
  // 如果时间差大于等于5毫秒
  if(new Date().getTime() - before_unload_time >= 5) {
    console.log('用户刷新界面')
  } else {
    console.log('用户关闭界面')
  }
});

用户数据报告

一般情况下页面上报数据可以直接调用socket，而当用户刷新或关闭浏览器时javascript 判断 浏览器，很大概率会导致数据上报失败。 这时候就可以使用浏览器提供的sendBeacon方法了。

const url = 'https://canpointtest.com/frontEnd/dataApi/insertRecord'
const data = {
  type: 'send',
  name: '数据上报'
}
const blob = new Blob([JSON.stringify(data)], {
  type: 'application/json; charset=UTF-8',
})
navigator.sendBeacon(url, blob)

手机浏览器和PC浏览器的区别

由于联通端的浏览器与PC端不同，因此没有关闭浏览器或浏览器选项卡的操作。 在联通端关闭浏览器相当于直接杀掉该程序。 可能是出于安全原因，我们很难监听到客户端杀掉进程的操作。 的

联通端关闭浏览器（干掉浏览器）风暴中，beforeUnload、unload、visibilitychange报告失败，返回桌面即可监听visibilitychange风暴