visibilitychange 的使用

概述

• visibilitychange 事件在浏览器当前标签页被切换到后台，或者从后台切换进当前标签页时，会被监测到

使用方法

// 在页面加载时注册页面
created() {
   document.addEventListener('visibilitychange',this.getVisiChangeFunc)
},
methods:{
    // 定义方法，分别监测 visibilityState 的值
    getVisiChangeFunc(){
        if(document.visibilityState === 'visible') {
            console.log('执行了页面显示事件',new Date());
        }else if(document.visibilityState === 'hidden') {
            console.log('执行了页面隐藏事件',new Date());
        }
    }
}

效果

• 切换到别的 tab 页，停留几秒后回到当前页
  

• 最小化浏览器，停留几秒后打开浏览器
  

• 开启其他窗口遮盖浏览器，停留几秒后打开浏览器
  

• 以上三种切换方式均在当前 tab 被隐藏时触发 hidden 回到当前 tab 时触发 visible

浏览器兼容性

• visibilitychange 对 Safari 浏览器兼容性不佳
• visibilitychange的使用