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 Firefox3.5中操作select的问题
Jul 10 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 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 地址栏信息的获取代码
2009/01/07 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
Linux中为php配置伪静态
2014/12/17 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python实现自动发送邮件
2018/06/20 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python中一些深不见底的“坑”
2019/06/12 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
中学生秋季运动会广播稿
2014/09/21 职场文书
检察院起诉意见书
2015/05/20 职场文书
教务处干事工作总结
2015/08/14 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
python使用glob检索文件的操作
2021/05/20 Python
如何使用PyCharm及常用配置详解
2021/06/03 Python