vue 页面刷新/关闭监听
<script>
/**
* 根据执行不同的操作(刷新or关闭)所需要的时间来判断是执行了哪个操作。
* 浏览器关闭执行的是 beforeunload , unload 这两个事件;
* 而浏览器刷新执行的是beforeunload, unload, load 三个事件;
* 在mounted生命周期中挂载beforeunload,和unload事件,通过执行间隔时间判断是刷新页面还是卸载(关闭)页面,如果是关闭浏览器,两个事件执行间隔事件会少于5ms,刷新页面时间会长,不同页面经测试所需时间8~100ms之间不等。注意销毁事件 避免影响其他页面 (destroyed生命周期)
* 经过我的实践发现性能好的浏览器刷新页面时间间隔可能是4毫秒,所以保险起见 gap_time < 4
* 如果有提示确认框,则无法根据时间来验证了
* */
var beforeUnload_time = 0
window.onbeforeunload = function (e) {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
localStorage.setItem('e', JSON.stringify(e))
if (e) {
e.returnValue = '关闭提示111';
}
localStorage.setItem('event', JSON.stringify(event))
// 默认刷新页面
localStorage.setItem('pageStatus', '1')
// 记录时间
beforeUnload_time = new Date().getTime();
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '关闭提示111';
};
window.onunload = function (e) {
var gap_time = new Date().getTime() - beforeUnload_time;
localStorage.setItem('gap_time', gap_time)
//判断是窗口关闭还是刷新
if (gap_time < 4) {
//如果是登录状态,关闭窗口前,移除用户 ,必须发送同步请求
localStorage.setItem('pageStatus', '0')
console.log("你关闭了浏览器");
}
}
</script>