vue如何区别浏览器刷新和关闭

知识点

浏览器关闭执行的是 beforeunload ， unload 这两个事件；
而浏览器刷新执行的是beforeunload， unload， load 三个事件；

思路

虽然刷新与关闭都会走onbeforeunload与onunload，但可能因为刷新在加载新页面前内部机制还需要做一些准备工作，所以刷新事件在执行到onunload事件时，用的时间会比关闭事件时间长。

所以，通过时间差来判断浏览器是刷新还是关闭，浏览器执行beforeunload的时候给一个开始时间，执行unload的时候给一个结束时间；判断一下时间差；我设置的是5毫秒来区分浏览器的关闭和刷新，具体的时间最好还是亲自测一下；

代码

 mounted() {let beginTime = 0; //开始时间let differTime = 0; //时间差window.onunload = function () {differTime = new Date().getTime() - beginTime;if (differTime <= 5) {console.log("这是关闭");} else {console.log("这是刷新");}};window.onbeforeunload = function () {beginTime = new Date().getTime();};},
};

本人亲测有效

vue如何区别浏览器刷新和关闭相关推荐

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue监听浏览器刷新和关闭；
注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的:如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template><div>< ...
终极版---如何区别浏览器刷新和关闭
浏览器关闭窗口时给后台发请求刷新时不做操作 // 检测浏览器窗口关闭 var _beforeUnload_time = 0,_gap_time=0; window.οnunlοad=function ...
浏览器刷新和关闭事件
现在谷歌和火狐不能自定义浏览器的弹出窗,只能显示各自系统定义通用字段: 我们在监听浏览器的刷新和关闭前,先了解浏览器对事件的执行步鄹不同的浏览器刷新和关闭时对onbeforeunload()和onu ...
浏览器刷新、关闭页面与统计在线人数
项目中可能需要统计在线人数,也可能需要在用户在退出时进行用户注销登录,既为统计实时在线人数,也为及时清理暂时不再使用的session,节约资源提高性能. 对于以上的情况,若用户使用页面的注销按钮退出登 ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunlo ...
vue 监听页面刷新或关闭
参考:https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转,无法监听到 ...
vue 监听浏览器刷新
1.在mounted中加入如下代码 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) 复制代码 ...
vue项目实现定时刷新和关闭刷新功能
<div class="refleshBtn"><el-button type="primary" plain size="mini ...

vue如何区别浏览器刷新和关闭

知识点

思路

代码

vue如何区别浏览器刷新和关闭相关推荐

最新文章

热门文章