Vue监听浏览器关闭(或者刷新)、切换标签页触发事件

最新推荐文章于 2025-04-19 14:07:25 发布

转载最新推荐文章于 2025-04-19 14:07:25 发布

· 5.2k 阅读

15 ·

版权

原文链接：https://blog.youkuaiyun.com/Tjohn9/article/details/129412468

文章标签：

#vue.js #javascript #前端

文章讲述了在Vue.js应用中如何利用`visibilitychange`事件监听浏览器标签页的切换，以及使用`beforeunload`事件监听浏览器关闭或刷新。当页面隐藏时调用`handleFn`方法，可能涉及发送请求，推荐使用`navigator.sendBeacon`确保数据在页面销毁前发送。此外，也提到了在不同场景下选择axios发送请求的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
   export default {
  name: 'App',
  mounted() {
    /*浏览器标签页切换会触发"visibilitychange"事件*/
    document.addEventListener("visibilitychange", e=>{
    //隐藏标签
      if(document.visibilityState === "hidden"){
        this.handleFn()
      }
      //切换显示标签
      if(document.visibilityState === "visible"){
        
      }
    })
    /*浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"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)
    }
  }
}