js监听当前页面是否处于浏览状态

Posted 2022-12-02 _陌默

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');