js监听当前页面是否处于浏览状态有以下两种方法:
1. 监听页面document
的 visibilitychange
事件
通过监听document
的visibilitychange
事件时,获取到的 visibilityState
变量的值来判断当前页面的状态。
document.addEventListener('visibilitychange',() => {
const state = document.visibilityState
console.log(state) // hidden 表示当前页面切换为隐藏状态,visible表示当前页面切换为浏览状态
})
2. 为window
添加 onfocus
, onblur
事件
通过 window
中的 onfocus
与onblur
事件来判断。当触发 onfocus
事件时则当前页面刚刚切换至浏览状态,当触发 onblur
事件时则当前页面刚刚切换至隐藏状态。
window.onfocus = (e) =>{
console.log('focus');
}
window.onblur = (e) => {
console.log('blur');
}