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

场景

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

关键方法

网络找了大量示例，都是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的方式建立连接，断连。让后端去判断

原文：https://juejin.cn/post/7482769108523221031