浏览器刷新和关闭事件

现在谷歌和火狐不能自定义浏览器的弹出窗，只能显示各自系统定义通用字段；

我们在监听浏览器的刷新和关闭前，先了解浏览器对事件的执行步鄹

不同的浏览器刷新和关闭时对onbeforeunload()和onunload()的执行步骤是不同的，没弄明白之前导致多种尝试都不见效，一丝丝头疼。
ie、chrome、360：
页面加载时执行onload()；
刷新时先执行onbeforeload()，新页面即将替换旧页面时onunload()，最后onload();
关闭时执行onbeforeload()，再执行onunload().
firefox:
刷新时只执行onunload();
关闭时只执行onbeforeunload().
低版本的会都执行onbeforeunload().

onbeforeunload事件可以实现对浏览器刷新和关闭监听

window.onbeforeunload=function(e){var e = window.event||e;e.returnValue=("离开吗？");
}

那我们有时候只想对单独的刷新或关闭进行监听

刷新可以使用onload进行监听

window.onload = function(){if(localStorage.getItem('tab') == 'true'){console.log('该页面以打开')}else{localStorage.setItem('tab','true')}
}

关闭

if(!isIE && !isEdge && !isIE11) {//兼容chrome和firefoxvar _beforeUnload_time = 0, _gap_time = 0;var is_fireFox = navigator.userAgent.indexOf("Firefox")>-1;//是否是火狐浏览器window.onunload = function (){_gap_time = new Date().getTime() - _beforeUnload_time;if(_gap_time <= 5){$.post('webLoginController.do?delSession2');//浏览器关闭}else{//浏览器刷新}}window.onbeforeunload = function (){ _beforeUnload_time = new Date().getTime();if(is_fireFox){//火狐关闭执行$.post('webLoginController.do?delSession2');//浏览器关闭} };
}

考虑兼容性的问题，我们得区别不同的浏览器

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isIE11 = userAgent.indexOf("rv:11.0") > -1; //判断是否是IE11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器

参考：https://blog.csdn.net/qq_38627581/article/details/78854291
https://blog.csdn.net/skybiut/article/details/81128179

浏览器刷新和关闭事件相关推荐

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunlo ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
vue监听浏览器刷新和关闭；
注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的:如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template><div>< ...
浏览器刷新、关闭页面与统计在线人数
项目中可能需要统计在线人数,也可能需要在用户在退出时进行用户注销登录,既为统计实时在线人数,也为及时清理暂时不再使用的session,节约资源提高性能. 对于以上的情况,若用户使用页面的注销按钮退出登 ...
终极版---如何区别浏览器刷新和关闭
浏览器关闭窗口时给后台发请求刷新时不做操作 // 检测浏览器窗口关闭 var _beforeUnload_time = 0,_gap_time=0; window.οnunlοad=function ...
html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
html5中页面关闭事件监听,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
JS做谷歌浏览器关闭事件监听
问题:自动化录制插件开发,每次录制结束,如果直接点击关闭而不通过自动化窗口提供的按钮实现,则下一次窗口打开的时候出现错乱,步骤显示.tabid显示等问题.经过排查,窗口新开是在父级框架,同时正常点击录 ...

浏览器刷新和关闭事件

浏览器刷新和关闭事件相关推荐

最新文章

热门文章