// 这里有三个状态 prerender,visible 和 hidden
let pageVisibleStatus = document.visibilityState;
// 监听页面状态
document.addEventListener('visibilitychange', function() {
// 页面状态变化为不可见时触发
if (document.visibilityState == 'hidden') { ... }
// 页面状态变化为可见时触发
if (document.visibilityState == 'visible') { ... }
}
);
<script>
document.addEventListener('visibilitychange', function() {
//console.log(document.visibilityState)
switch(document.visibilityState) {
case 'prerender':
console.log('网页预渲染,内容不可见')
break;
case 'hidden':
console.log('内容不可见,处理后台、最小化、锁屏状态')
break;
case 'visible':
console.log('处于正常打开')
break;
}
})
</script>
mounted() {
document.addEventListener('visibilitychange', this.handleVisiable)
},
destroyed() {
document.removeEventListener('visibilitychange', this.handleVisiable)
},
methods: {
handleVisiable(e) {
switch(e.target.visibilityState) {
case 'prerender':
console.log('网页预渲染,内容不可见')
break;
case 'hidden':
console.log('内容不可见,处理后台、最小化、锁屏状态')
alert('警告!你已经离开当前答题页面');
break;
case 'visible':
console.log('处于正常打开')
break;
}
}
}