浏览器tab页不在当前页时推送iframe，切换到当前页时iframe渲染不出来

在项目中遇到一个问题，浏览器tab页不在当前页时推送iframe，切换到当前页时iframe渲染不出来

// vue
methods: {
    hanldeVisiblityChange() {
      if (document.visibilityState === 'hidden') {
      // 此页面不是浏览器当前正在显示的tab页
        this.isCurrent = false
      } else if (document.visibilityState === 'visible') {
      // 此页面是浏览器当前正在显示的tab页
        this.isCurrent = true
      }
    }
 }
 mounted() {
    // 监听当前页面 显示状态
    window.addEventListener('visibilitychange', this.hanldeVisiblityChange);

    // 当页面被销毁时 移除监听
    this.$on('hook:beforeDestroy', () => {
      console.info('ws 我被销毁了, 移除监听>>>');
      window.removeEventListener('visibilitychange', this.hanldeVisiblityChange)
    })
  },
  beforeDestroy() {
    console.info('ws 我被销毁了,vue生命周期 >>>');
  },

虽然在vue中不建议直接使用这种监听，但是监听浏览器窗口tab页切换也只能用window了

PS：由于iframe的渲染问题，需要使用 v-if 而不是 v-show

参考：
监听浏览器tab页切换
页面可见性API