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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
记一次vue去除#问题处理经过小结
Jan 24 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验证码函数的使用示例
2013/05/03 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Python使用爬虫猜密码
2016/02/19 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python 如何停止一个死循环的线程
2020/11/24 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
活动策划求职信模板
2014/04/21 职场文书
廉洁自律个人总结
2015/02/14 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
项目合作意向书
2015/05/08 职场文书
高中生军训感言
2015/08/01 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Go获取两个时区的时间差
2022/04/20 Golang
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技