vue 全局监听浏览器窗口关闭以及无痕模式场景提示

需求场景一：用户退出时清空localStorage并告知后台用户退出，保持登录状态时关闭窗口或者浏览器达到相同目的

实现：

// 在mounted中触发beforeunload事件以及在destroyed中触发beforeunload事件
// 当文档或一个子资源正在被卸载时, 触发 unload事件，unload在beforeunload之后被触发
// 参考地址：https://blog.csdn.net/weixin_45372546/article/details/108538026
// 要做到全局监听，我直接放在了入口文件中 因个人项目而异
data(){return {_beforeUnload_time:'',_gap_time:''}
},mounted() {window.addEventListener("beforeunload", (e) => this.beforeunloadHandler(e));window.addEventListener("unload", (e) => this.unloadHandler(e));
},
methods: {beforeunloadHandler(e) {this._beforeUnload_time = new Date().getTime();//e.returnValue = '关闭提示'; 弹窗},unloadHandler(e) {let _this = this;this._gap_time = new Date().getTime() - this._beforeUnload_time;//判断是窗口关闭还是刷新if (this._gap_time <= 5) {// 退出登录 xxxxxxxx// 通知后台xxxxxxxx}},
},
destroyed() {window.removeEventListener("beforeunload", (e) =>this.beforeunloadHandler(e));window.removeEventListener("unload", (e) => this.unloadHandler(e));
}

场景二：二次验证的登录信息一般会存在localStorage中或则session中，但是在浏览器无痕模式中是不能用的，localStorage中是有数据的就是不能用，你说气人不。。。

一些特殊项目中可以硬提示不允许使用无痕模式

// 可以先给localStorage进行写入和删除来判断是否无痕模式
try{window.localStorage.setItem('test', 'testValue')window.localStorage.removeItem("test")
}catch(error){layer.open("请切换浏览器的无痕模式")// 操作XXXXfunction () {XXXXXX    }
}

虽然有点流氓O(∩_∩)O哈哈~

vue 全局监听浏览器窗口关闭以及无痕模式场景提示相关推荐

巨坑！监听浏览器窗口关闭onbeforeunload不起作用（脱坑了啊！！）
----------------重要通知-------------- Hello,本人的博客文章已更新至个人网站(www.jonexu.cn) 文章中有问题可以到网站联系博主,后续新的文章也将更新在个 ...
监听浏览器窗口关闭onbeforeunload不起作用的原因
项目场景: 需求:用户手动关闭浏览器需要提示,但是代码自动触发的关闭不提示逻辑实现 mounted() {window.addEventListener('beforeunload', e => ...
监听浏览器窗口关闭事件onbeforeunload不起作用
先贴代码 <body><! ...
[轉]Flash/Flex监听浏览器的关闭事件
FROM : http://blog.ityao.com/archives/581 如果想用Flash/Flex监听浏览器的关闭事件, 可以通过JavaScript的window.onbeforeun ...
VUE 全局监听sessionStorage变化
VUE 全局监听sessionStorage变化另参考: (转)vue中监听sessionStorage的变化
监听浏览器刷新/关闭页面
首先,使用onunload或onbeforeunload可以监听浏览器关闭事件,但是无法区分关闭与刷新.以下js代码可以部分监听关闭浏览器的事件! 可以在标签中添加方法: <!DOCTYPE h ...
【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
Vue全局监听滚动条事件
项目需求滚动条大于200时候,头部固定定位,小于的时候相对定位,监听滚动条事件: // 全局监听,写在App.vue里面methods: {handleScroll(){let scrollTop = ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...

vue 全局监听浏览器窗口关闭以及无痕模式场景提示

一些特殊项目中可以硬提示不允许使用无痕模式

vue 全局监听浏览器窗口关闭以及无痕模式场景提示相关推荐

最新文章

热门文章