JS区分浏览器页面是刷新还是关闭


Posted in Javascript onApril 17, 2016

Web开发者在系统开发中经常要面对产品经理各式各样的需求,当然,大部分对产品体验还是有帮助的,例如我们今天提到的刷新页面,前进后退,关闭浏览器标签时,为了避免用户误操作,需给出二次确认提示框,这个相信大家都非常熟悉了,采用浏览器提供的BOM事件机制就可以解决,使用window对象的onbeforeunload事件即可,如果产品经理只提出这样的需求,那确实无可厚非,然而其需要的不仅仅是这些...

例如,我们一次项目开发中,产品经理就针对我们的实现提出了“改进方案”:

你们这弹出框太丑了,跟系统整体风格不搭调啊,不能使用咱们自己组件库中的Dialog吗?很好的问题...我只想说,you can you up...

你们这刷新和关闭标签页中展示的文案一样啊,需要区分对待下,刷新提示XXX,关闭时提示SSS,这样用户才能更明确。恩,考虑到了用户的体验,很好,我还是想说,you can you up...其实,浏览器在关闭和刷新时,本身已经区别对待了,提示是不同的,只不过我们自定义的部分并不能显示不同的文案而已;当然,也有一些hack的方法,但是很难适应多个浏览器,各浏览器内部对于关闭标签页和刷新的实现机制会有所不同;

你们每次登录进来,为什么要延时10秒,才让坐席签入电话系统啊(我们做的是客服系统)?能不能把这个限制去掉啊,用户体验太不好了!我们也想去掉啊,但是电话系统频繁签入签出会有问题,用户刷新了浏览器,再次签入,如果相隔时间很短的话,电话系统会出现故障,为了避免这个问题,我们才加上了这个限制,但是回过头来思考,就可以进入我们今天讨论的主题了;

区分刷新与关闭标签页

我们无法根据浏览器事件区分刷新还是关闭标签页,进而在相应动作触发前,执行不同的动作,但是对于上文中产品提出的第三点意见,其实还是可以考虑优化一下的,就是只有在刷新的时候延时10秒,新登录或关闭标签页一段时间之后再进来时不延时;

要做到这点其实也很简单,使用浏览器的本地存储机制就可以实现,例如cookie,LocalStorage等,这里就不能使用SessionStorage了,因为本次回话结束后,该缓存就失效了;由于在cookie中存储会增加cookie的字节数,每次请求中相应的网络传输量会增加,因此,我们采用了LocalStorage;其操作很简单,我们使用的前端框架是AngularJS,具体如下:

const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}

上面代码主要作用是,进入系统后,会先去LocalStorage中获取上次退出时的时间,再获取当前时间,两个时间进行减法,如果值小于10秒,我们就认为这是刷新,如果值大于10秒,我们认为是关闭标签页或新登录,进而可以执行不同的方法,让客服有更好的体验,不用每次进入系统都要等待10秒才能签入电话系统了,产品经理还是很重要的,吼吼,要不是他的疑问,可能我们也不会来优化这个地方了...当然,其实RD也要逐渐培养这种用户体验至上的思维,哪怕有一点可提升客服效率的地方,都值得我们花时间来优化;

下面把相关退出的代码也贴一下吧,前面忘说了,不管是刷新,还是关闭标签页,只要是页面销毁,我们都会去执行登出电话系统的操作,所以每次进来后需要重新签入;

//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空,请谨慎操作...';
};
//每次页面unload时,设置LocalStorage时间;
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};

我们可能还注意到一些问题,那就是刷新,关闭页面,前进后退,你需要跳出浏览器默认二次确认框,但是用户点击退出系统按钮,则必须弹出自己组件库中的Dialog了,还必须不能两个都弹出,具体代码如下:

onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您确定要退出系统吗?'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 内部操作,大家不用管
...
}
}

以上所述是小编给大家介绍的JS区分浏览器页面是刷新还是关闭的全部内容,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
js使用心得分享
Jan 13 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
js编写简易的计算器
Jul 29 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 #Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 #Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 #Javascript
js实现select二级联动下拉菜单
Apr 17 #Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 #Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
You might like
UCenter Home二次开发指南
2009/05/28 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
利用python画出折线图
2018/07/26 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Pytorch转tflite方式
2020/05/25 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
超市创业计划书
2014/09/15 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
原告离婚代理词
2015/05/23 职场文书
金砖之国观后感
2015/06/11 职场文书
高二数学教学反思
2016/02/18 职场文书
python_tkinter事件类型详情
2022/03/20 Python