浏览器刷新和关闭事件

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

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

不同的浏览器刷新和关闭时对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和firefox
	var _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.youkuaiyun.com/qq_38627581/article/details/78854291
https://blog.youkuaiyun.com/skybiut/article/details/81128179

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值