判断页面活动状态
如何利用前端代码判断浏览器是否处于系统当前活动窗口呢？遗憾的是，直接判定此状态的方法目前尚不存在。
但我们可以通过以下折衷方案间接判断页面当前状态：
- visibilitychange 事件：监听页面可见性状态的变化。当页面被最小化、切换到其他选项卡或窗口时，将触发此事件。
- focus 事件：特定元素或页面失去/获得焦点时触发此事件。我们可以监听某个特定的页面元素（如按钮或输入框）的 focus 事件。
通过整合以上两种方法，我们可以大致判断页面是否处于活动状态：
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
// 页面未激活
} else {
// 页面处于激活状态，继续监听元素焦点
}
});
// 监听特定元素的焦点变化
document.getElementById('my-element').addEventListener('focus', () => {
// 页面处于激活状态
});需要注意的是，此方法并不能保证 100% 准确，因为有可能会出现某些情况：
- 用户将页面最小化，但元素仍保持焦点。
- 用户切换到其他选项卡，但页面仍然可见（例如，在某些浏览器中，最小化时视频仍在播放）。
因此，此方法只能提供大致判断，并在大多数情况下是有效的。
