JS区分浏览器页面是刷新还是关闭_前端监听网页是关闭还是刷新 - CSDN文库

104 浏览量更新于2023-05-09 评论收藏 71KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JS区分浏览器页面是刷新还是关闭区分浏览器页面是刷新还是关闭

在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页，非常

实用，感兴趣的童鞋参考下吧

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 === '退出') {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38653691

粉丝: 6
资源: 961

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈