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 相关文章推荐
js常用代码段整理
Nov 30 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
js实现延迟加载的方法
Jun 24 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
如何基于js判断浏览器版本
Feb 20 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php debug 安装技巧
2011/04/30 PHP
php实现无限级分类
2014/12/24 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
九种原生js动画效果
2015/11/11 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
django-filter和普通查询的例子
2019/08/12 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
毕业学生推荐信
2013/12/01 职场文书
社区志愿者活动方案
2014/08/18 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang