监听浏览器刷新及关闭

AWang 发布于2019-08-26 13:57 / 1494人阅读

摘要：解决思路对于浏览器的关闭和刷新会触发两个事件和，问题在于如何区分用户是想刷新还是退出此时应该将用户催眠，然后获得用户的思想，预判用户走位及操作。。。事件是无法阻止页面关闭的。

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

onbeforeunload()和onunload()

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

用法：

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

区别：

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

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

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

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

区分刷新和退出

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

解决思路：

用户关闭浏览器时，记录当前时间，并存于浏览器缓存中

用户再次打开页面时，获取上次退出的时间，并于当前时间进行比较，若小于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());
}

混合云超融合服务器监听浏览器标签关闭 html监听刷新事件服务器监听数据刷新网页是关闭还是刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109876.html

Day15 - LocalStorage

摘要：完整中文版指南及视频教程在从零到壹全栈部落。当页面重新刷新或者关闭之前，执行清除页面的缓存。慎用，尤其在生产环境中。 Day15 - LocalStorage (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 作者：©黎跃春-追时间的人简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 ...

用户84 2019-08-20 18:32 评论0 收藏0
React组件卸载、路由跳转、页面关闭（刷新）之前进行提示

摘要：组件卸载生命周期路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。至此已经实现了路由跳转时提醒用户进行保存的功能。 React组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。以一个实际案例出发：某单页应用的文章编辑页用户正在编辑文章，此时尚未保存。当用户...

leanote 2019-08-23 14:46 评论0 收藏0
React组件卸载、路由跳转、页面关闭（刷新）之前进行提示

摘要：组件卸载生命周期路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。至此已经实现了路由跳转时提醒用户进行保存的功能。 React组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。以一个实际案例出发：某单页应用的文章编辑页用户正在编辑文章，此时尚未保存。当用户...

J4ck_Chan 2019-08-05 16:01 评论0 收藏0
原生js滚动到底部加载数据和下拉刷新 Scrollload

摘要：原文地址初衷如今移动端站点越来越多，滚动到底部加载数据和下拉刷新的需求非常的常见，即使现在很多站点也会有这样的需求，比如百度首页就有。原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷如今移动端站点越来越多，滚动到底部加载数据和下拉刷新的需求非常的常见，即使现在很多pc站点也会有这样的需求，比如百度首页...

HollisChuang 2019-08-20 13:34 评论0 收藏0
sendBeacon 刷新/关闭页面之前发送请求

摘要：背景有一个任务非常耗时会消耗后台大量算力，所以在退出页面的时候，要求前端这边发送一个请求来杀死任务。小结本文总共讲了三个，和，这个估计知道的人比较少，以后遇到前端埋点和页面卸载前发送请求的需求，记得使用这三个。背景：有一个任务非常耗时会消耗后台大量算力，所以在退出页面的时候，要求前端这边发送一个请求来杀死任务。一开始以为这个需求非常简单，就是在进入其他路由前，发送一下请求，杀死一...

gxyz 2019-08-23 15:27 评论0 收藏0