监听浏览器刷新及关闭

时间: 2019-05-28阅读: 3905标签: 浏览器

需求背景:

为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。 


解决思路:

javascript 对于浏览器的关闭和刷新会触发两个事件 onbeforeunload()和onunload(),问题在于如何区分用户是想刷新还是退出(此时应该将用户催眠,然后获得用户的思想,预判用户走位及操作。。。),本文主要记录这两个方法的区别,设备兼容性及如何催眠用户(开玩笑的),是如何区分刷新和退出浏览器.


onbeforeunload()和onunload()

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

用法:

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

区别:

  1. unbeforeunload()是在页面刷新或关闭之前触发的事件,而onubload()是在页面刷新或关闭之后才会触发的。 

  2. unbeforeunload()事件执行的顺序在onunload()事件之前发生。 

  3. unbeforeunload()事件可以禁止onunload()事件的触发。 

  4. onunload()事件是无法阻止页面关闭的。

兼容性(pc):

事件ChromeFirefoxIEOperaSafari
onunloadyesyesyesyesyes
onbeforeunload114123

注意: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());
}
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3447

html5的pushstate以及监听浏览器返回事件

实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的东西 都没有了,这很影响体验。

主流浏览器对ES6的支持情况

现在使用的js语法,基本是ES5的规范 ,15年出的ES6的规范增加了很多其他语法,要看浏览器的支持情况,如果浏览器不支持那么就会报错,ES6 块级作用域 关键字let, 常量const,对象字面量的属性赋值简写,赋值解构,函数参数

用JavaScript让你的浏览器说话

最近在开发一个个人项目时,我冒出了一个尝试让浏览器说话的想法。不知道该怎么做,于是,我在网上寻找了一下答案,在MDN上,我找到了答案。让我们来看看如何通过JavaScript让浏览器说话。

javascript判断浏览器类型与版本

除了另无它法,肯定不使用navigator.userAgent来判定浏览器。因为在第一次浏览器大战初期,Netscape占绝对统计地位,大部分人们不愿意兼容其他浏览器,并通过检测其UA让他们的网站只允许Netscape访问

浏览器中实现JavaScript计时器的4种创新方式

由于 Web Worker 本质上是Web线程,因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的,可以让主线程准确的知道什么时候合适

浏览器执行js原理

是不是大都数前端开发者都会有这样的疑惑,确实,我自己在开发的过程中每次碰到promise,setTimeout,requestAnimationFrame都会去想,在这个执行的过程中到底发生了什么?

浏览器的Event Loop

进程和线程都是CPU工作时间片的一个描述。进程描述了CPU在运行指令及加载和保存上下文所需的时间,放在应用上来说就代表了一个程序。

js禁止浏览器保存用户密码

在HTML中,除了要用的密码框以外,额外添加一个密码框,设置为隐藏,注意:添加的用来干扰的密码框,必须在有用的密码框的上面,上面任何地方都行,就是不要在下面。

JavaScript判断浏览器内核,微信打开自动提示在浏览器打开

微信会屏蔽 URL 自定义的 scheme ,导致无法跳转手机中的浏览器。网上有一些工具类网站可以实现直接跳转浏览器,之后有机会我会整理一下。我们今天只讨论通过 JavaScript 判断是否在微信浏览器中打开,如果是则弹出提示,在浏览器中打开

浏览器是多进程还是单进程?

浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广