浏览器页面切换触发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 触发任何页面都会触发 是浏览器的一个事件相当于

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值