监听浏览器刷新及关闭

42次阅读

共计 1340 个字符,预计需要花费 4 分钟才能阅读完成。

需求背景:为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。
解决思路:javascript 对于浏览器的关闭和刷新会触发两个事件 onbeforeunload()onunload(),问题在于如何区分用户是想刷新还是退出(此时应该将用户催眠,然后获得用户的思想,预判用户走位及操作。。。),本文主要记录这两个方法的区别,设备兼容性及如何催眠用户(开玩笑的),是如何区分刷新和退出浏览器

onbeforeunload()和 onunload()

onbeforeunload 和 onunload 都是在页面刷新或退出时触发的事件

用法:

事件 用法
onunload window.onunload=function(){SomeJavaScriptCode};
onbeforeunload window.onbeforeunload=function(){SomeJavaScriptCode};

区别:

  1. unbeforeunload()是在页面刷新或关闭之前触发的事件,而 onubload() 是在页面刷新或关闭之后才会触发的。
  2. unbeforeunload()事件执行的顺序在 onunload() 事件之前发生。
  3. unbeforeunload()事件可以禁止 onunload() 事件的触发。
  4. onunload()事件是无法阻止页面关闭的。

兼容性(pc):

事件 Chrome Firefox IE Opera Safari
onunload yes yes yes yes yes
onbeforeunload 1 1 4 12 3

注意:onbeforeunoad 在移动端基本都不兼容,onunload 则兼容大部分主流移动端浏览器

参考文献:
MDN: window.onbeforeunload
MDN: window.onunload

区分刷新和退出

在浏览器关闭前是无法判断用户是刷新还是退出,所以我们在用户再次打开的时候来判断用户是否刷新

解决思路:

  1. 用户关闭浏览器时,记录当前时间,并存于浏览器缓存中
  2. 用户再次打开页面时,获取上次退出的时间,并于当前时间进行比较,若小于 5s 则表示用户执行的是刷新操作,若大于 5s 则判定为退出

注意:5s 并非固定,要根据实际情况调整

上代码:

// 进入页面执行
// 记录当前时间并转成时间戳
const now = new Date().getTime();
// 从缓存中获取用户上次退出的时间戳
const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
// 判断是否为刷新,两次间隔在 5s 内判定为刷新操作
const refresh = (now - leaveTime) <= 5000;
// 测试 alert
alert(refresh ? '刷新' : '重新登陆');

// 退出当前页面执行
window.onunload = function(e){// ios 不支持 window.onbeforeunload()
  // 将退出时间存于 localstorage 中
  localStorage.setItem('leaveTime', new Date().getTime());
}

正文完
 0