H5 - - - - - 页面可见性改变事件 ＜visibilitychange＞

1. 使用说明

visibilitychange 事件

当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器，或者在移动设备上从浏览器切换到不同的应用程序时，该事件就以 visibilityState 为 hidden 的状态触发。

2. 代码示例

  methods: {
    // 预先定义回调方法
    handleVisibilityChange(event) {
      if (!document.hidden) {
        // 页面变得可见时触发
        console.log('页面变得可见');
      }else{
        // 页面变得不可见时触发
        console.log('页面变得不可见');
      }
    },
  },
  
  
  mounted() {
    // 监听 visibilitychange 事件以检测页面是否从后台切换到前台
    document.addEventListener("visibilitychange", this.handleVisibilityChange);
  },


  beforeDestroy() {
    // 移除监听 visibilitychange
    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
  },