监听浏览器自带刷新、前进、回退、关闭标签页、切换标签页
mounted() {
window.addEventListener('popstate', () => this.handleBack(), false)
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.addEventListener('unload', e => this.unloadHandler(e))
document.addEventListener('visibilitychange', this.changePage())
},
beforeDestroy() {
window.removeEventListener('popstate', this.handleBack())
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
window.removeEventListener('unload', e => this.unloadHandler(e))
document.removeEventListener('visibilitychange', this.changePage())
}
1、监听浏览器切换标签页
changePage() {
console.log('监听浏览器返回前进')
}
2、监听浏览器自带前进回退按钮，是无法精确识别到当前进行的操作（同时会监听前进和回退方法）
handleBack() {
console.log('监听浏览器返回前进')
}
3、监听浏览器自带刷新按钮，是无法精确识别到当前进行的操作（同时会监听标签页关闭和刷新方法）
首先在写这个方法前，我们要了解这个监听的逻辑：
3.1 页面加载时只执行onload事件。
3.2 页面关闭时，先onbeforeunload事件，再onunload事件。
3.3 页面刷新时先执行onbeforeunload事件，然后onunload事件，最后onload事件。
其次，我们可以提供计算时间差判断当前监听的是刷新还是关闭标签页，这个的时间差是存在误差的，因此存在可能不适用于小部分情况或者浏览器。如果需要同时有监听浏览器前进回退方法，需要在浏览器刷新的地方重新注册监听事件。
beforeunloadHandler() {
this.beforeUnloadTime = new Date().getTime()
},
unloadHandler() {
this.gapTime = new Date().getTime() - this.beforeUnloadTime
if (this.gapTime <= 5) {
console.log('关闭窗口')
} else {
console.log('浏览器刷新')
window.addEventListener('popstate', () => this.handleBack(), false)
}
}
相关知识
【转】浏览器“后退”、“前进”或可以这么去监听
监控浏览器的前进后退
如何使用JavaScript处理浏览器的后退和前进按钮
云上城之歌宠物怎么回退
技能培训中心 食品营养标签的解读 12食品营养标签的解读.pptx
#RFID动物脚环#标签生产厂家 #上海择捷智能科技有限公司
食品营养标签解读
宠物食品进口需要做标签备案吗
宠物标签矢量
宠物用品防伪标签介绍#宠物用品防伪标签 #宠物食品防伪标签 #防伪标签 #防伪码 #防伪标签怎么做
网址: 监听浏览器自带刷新、前进、回退、关闭标签页、切换标签页 https://m.mcbbbk.com/newsview352405.html
| 上一篇: 关键时刻可以救狗狗于危难时的口令 |
下一篇: vue项目使用js监听浏览器关闭 |
