服务器与运维

当前位置:澳门新莆京娱乐官网 > 服务器与运维 > JS区分浏览器页面是刷新还是关闭_javascript技巧_脚本之家

JS区分浏览器页面是刷新还是关闭_javascript技巧_脚本之家

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2020-01-05 07:08

Web开荒者在系统开垦中平时要直面产物老总多姿多彩的急需,当然,超越44%对成品体验依然有帮带的,举例我们前几日事关的刷新页面,前进后退,关闭浏览器标签时,为了制止客户误操作,需付出叁遍确认提示框,这么些相信大家都拾分熟识了,选取浏览器提供的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;const lastestLeaveTime = parseInt(this.$window.localStorage.getItem, 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秒本事签入电话系统了,成品经营依然很关键的,吼吼,要不是他的疑团,只怕大家也不会来优化那些地点了...当然,其实RubiconD也要稳步培育这种顾客体验至上的盘算,哪怕有某个可晋级客服效能的地点,都值得大家花时间来优化;

上面把有关退出的代码也贴一下啊,前边忘说了,不管是刷新,依旧关闭标签页,只假使页面销毁,大家都会去执行登出电话系统的操作,所以每一回进来后须求重新签入;

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

大家只怕还介意到有些标题,那正是刷新,关闭页面,前行后退,你需求跳出浏览器暗中认可二遍确认框,可是客户点击退出系统开关,则必需弹出自身组件库中的Dialog了,还必需不可能五个都弹出,具体代码如下:

onStatusClick {if  {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区分浏览器页面是刷新仍旧关闭的全体内容,希望对我们具备利于!

本文由澳门新莆京娱乐官网发布于服务器与运维,转载请注明出处:JS区分浏览器页面是刷新还是关闭_javascript技巧_脚本之家

关键词: