前言
在系统中，如果有打开新页面进行相关操作，若是有关联操作就需要通过判断页面的可见性来进行后绪的操作
一、触发visibilitychange变更的情况
页面的可见性有三个层面
- 页面可见时，用户关闭 Tab 页或浏览器窗口。
- 页面可见时，用户在当前窗口前往另一个页面。
- 页面不可见时，用户或系统关闭浏览器窗口。
这三种情况，都会触发visibilitychange事件。前两种情况，该事件在用户离开页面时触发；最后一种情况，该事件在页面从可见状态变为不可见状态时触发。
二、 hidden与visibilityState
hidden与visibilityState 都是 document对象的属性
document.visibilityState
返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。
- hidden：页面彻底不可见。
- visible：页面至少一部分可见。
- prerender：页面即将或正在渲染，处于不可见状态。
只要页面可见，其值就是true,什么情况下是hidden呢？
- 浏览器最小化。
- 浏览器没有最小化，但是当前页面切换成了背景页。
- 浏览器将要卸载（unload）页面。
- 操作系统触发锁屏屏幕。
document.hidden
只读，返回一个布尔值，表示当前页面是否可见
当document.visibilityState属性返回visible时，document.hidden属性返回false；其他情况下，都返回true
推荐使用document.visibilityState来判断页面的可见性
三、visibilitychange 事件
只要document.visibilityState属性发生变化，就会触发visibilitychange事件。因此，可以通过监听这个事件（通过document.addEventListener()方法或document.onvisibilitychange属性），跟踪页面可见性的变化
四、代码示例
<template>
<div ref="refDV">
测试visibilitychange
<el-button type="primary" @click="handleAddListener">启用</el-button>
<el-button type="danger" @click="handleremoveListener">销毁</el-button>
</div>
</template>
<script>
function gethiddenStatus() {
var isHidden = document.hidden;
if (isHidden) {
// 失去焦点
document.title = '小主，快回来';
console.log('visibilitychange--lost', document.visibilityState);
} else {
// 未失去焦点
document.title = '激活窗户';
console.log('visibilitychange--com', document.visibilityState);
}
}
export default {
mounted() {
this.handleAddListener();
},
destroyed() {
this.handleremoveListener();
},
methods: {
// 开启
handleAddListener() {
document.addEventListener('visibilitychange', gethiddenStatus, true);
},
// 手动销毁
handleremoveListener() {
document.removeEventListener('visibilitychange', gethiddenStatus, true);
}
}
};
</script>
输出结果参考：
销毁事件后，不再触发visibilitychange