监听浏览器刷新及关闭

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

需求背景:

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


解决思路:

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());
}

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

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

Js详细判断浏览器运行环境

看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问

不同浏览器的内核

网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户

Js实现阻止浏览器返回的功能

无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回

完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

h5活动页面底部有个悬浮图片按钮,使用fixed悬浮定位在底部,但是在安卓端的百度浏览器下打开,却发现该图片一闪而过,在百度浏览器中消失不见。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

火狐浏览器 访问所有HTTPS网站显示连接不安全解决办法

当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度。如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到这个网站,并显示“连接不安全”的错误信息页面。

GeckoView:Mozilla面向移动浏览器打造的渲染引擎

Mozilla 现已推出面向 Android 的全新移动浏览器 Firefox Preview。与大多数浏览器所采用的 Bink 渲染引擎不同,Firefox Preview 的渲染引擎 GeckoView 由 Mozilla 自行开发

常用浏览器内核及分类

浏览器是网页运行的平台,常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。 浏览器内核分成两部分:渲染引擎和 JS 引擎

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

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

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