js判断浏览器窗口回话关闭与刷新

超能996要躺平2025-03-18 14:19

场景

项目中有功能需要记录，浏览器系统窗口关闭时，发送接口数据到后台记录。

关键方法

网络找了大量示例，都是beforeunload去做，它去确实是可以在窗口被关闭的时候触发，但同时，页面执行刷新操作的时候，同样也可以触发。

尝试过许多方式，发现单纯靠前端没办法完美的解决。只能相对来说，勉强通过时间差的方式，尽快可能的实现该效果

示例代码

js 复制代码

// 定义全局变量记录时间戳
let startTime = 0;
let unloadTime = 0;

// 监听页面卸载前的事件
window.addEventListener('beforeunload', function (event) {
  // 记录离开页面的初始时间
  startTime = new Date().getTime();
});

// 监听页面完全卸载的事件
window.addEventListener('unload', function () {
  // 计算两次事件的时间差
  unloadTime = new Date().getTime() - startTime;

  // 根据时间差判断行为类型
  if (unloadTime <= 5) {
    // 通常小于等于5ms为选项卡关闭
    handleTabClose();
  } else {
    // 大于5ms一般为页面刷新或导航
    handlePageRefresh();
  }
});

// 关闭选项卡时的处理函数
function handleTabClose() {
  // 示例：向后台发送关闭请求
  axios.get('http://127.0.0.1:7001/')
}

// 页面刷新时的处理函数
function handlePageRefresh() {
  // 示例：刷新时执行的逻辑
  console.log('页面正在刷新...');
}

window.onbeforeunload = function () {
  beginTime = new Date().getTime();
};

这里附上接口日志截图

总结

通过时间差的时候，在大多数情况下，是可以区别出页面刷新与关闭情况。但不排除真正上生产，经大量测试后，可能出现的问题。

这里觉得比较合适的是，与后端合作，通过webSocket的方式建立连接，断连。让后端去判断