// 这里有三个状态 ?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;
? ? }
? }
}
?
