Vue监听浏览器关闭(或者刷新)、切换标签页,并发送请求给后端
监听浏览器关闭,关闭前发送http请求给后端,可以使用navigator.sendBeacon(url)
·
1、代码(App.vue)
<script>
export default {
name: 'App',
mounted() {
/*浏览器标签页切换会触发"visibilitychange"事件*/
document.addEventListener("visibilitychange", e=>{
if(document.visibilityState === "hidden"){
this.handleFn()
}
})
/*浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"beforeunload"事件*/
window.addEventListener('beforeunload', e => this.handleFn())
},
destroyed() {
/*remove掉上面对应的"visibilitychange"事件监听*/
document.removeEventListener("visibilitychange", e=>{
if(document.visibilityState === "hidden"){
this.handleFn()
}
})
/*remove掉上面对应的"beforeunload"事件监听*/
window.removeEventListener('beforeunload', e => this.handleFn())
},
methods:{
handleFn(){
/*处理逻辑*/
//1、如果要发送请求,那么最好用navigator.sendBeancon(url),它可以保证在浏览器页面销毁前,将请求发送出去。如果使用XMLHttprequest或者基于它实现的axios发送请求,那么可能出现浏览器关闭了,但是请求没有发送出去的情况。
//2、如果单纯监听切换浏览器标签页、单纯监听刷新页面,那么可以使用axios发送请求
//3、navigator.sendBeancon(url)默认发送POST请求
//4、举例如下:
const URL = process.env.VUE_APP_BASE_API+"/uploads/deleteAll"
navigator.sendBeacon(URL)
}
}
}
2、参考文章
更多推荐
已为社区贡献1条内容
所有评论(0)