浏览器页面切换触发to do something...

项目场景:

点击按钮在新窗口中打开一个页面切换页面每次都能触发一下函数拿到最新数据  不想手动刷新


解决方案1:

mounted(){   

    // 用于监听文档对象的visibilitychange事件的方法。当用户打开或最小化当前页面,或者切换浏览器标签页时会触发该事件。

    document.addEventListener('visibilitychange', this.monitor)

  },

methods:{

     monitor(e) {

         let isExist = e.target.visibilityState

         console.log(isExist)

         if (isExist === 'visible') {

                  console.log(new Date().toLocaleString(), `您已进入页面!`)

           } else {

                  // 切换或关闭都会触发

                  // alert(new Date().toLocaleString(), `您已离开页面!`)

      }

  }

}


解决方案2:

mounted(){

         window.onfocus = ()=> {

             // 在页面聚焦时,执行该函数

             // console.log('在每次切换回这个页面时,函数 `getgenntDate()` 都会被执行一次。');

                 this.getgenntDate();

           }

   };

方案1 可以只监听某一页面的进入和离开

方案2 触发任何页面都会触发 是浏览器的一个事件相当于

猜你喜欢

转载自blog.csdn.net/weixin_63443983/article/details/130085348
今日推荐