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 相关文章推荐
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
jquery实现提示语淡入效果
May 05 jQuery
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
php session 错误
2009/05/21 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
法律专业自我鉴定
2013/10/03 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
外国人来华邀请函
2015/01/31 职场文书
高一军训决心书
2015/02/05 职场文书
财务工作失误检讨书
2015/02/19 职场文书
勤俭节约主题班会
2015/08/13 职场文书
《实心球》教学反思
2016/02/23 职场文书