JS 如何判断浏览器是否为活动窗口状态

在网页开发中，有时我们需要知道浏览器窗口当前是否处于活动状态。比如，当用户切换到其他应用或窗口时，我们可能想要暂停某些动画效果、停止音频播放，或者当用户回到浏览器窗口时恢复这些操作。那么，如何使用 JavaScript 来判断浏览器是否为活动窗口状态呢？

使用 document.hasFocus() 方法

document.hasFocus() 是一个非常简单直接的方法。它会返回一个布尔值，如果当前文档（也就是浏览器窗口）具有焦点，即处于活动状态，返回 true；否则返回 false。示例代码如下：

if (document.hasFocus()) {
    console.log('浏览器窗口是活动的');
} else {
    console.log('浏览器窗口不是活动的');
}

不过需要注意的是，这个方法只能获取当前时刻窗口的焦点状态。如果我们想要实时监听窗口焦点状态的变化，还需要结合事件。

结合 focus 和 blur 事件

focus 事件会在元素（这里是浏览器窗口）获得焦点时触发，而 blur 事件会在元素失去焦点时触发。我们可以利用这两个事件来实时监测窗口状态的变化。示例代码如下：

document.addEventListener('focus', function() {
    console.log('浏览器窗口获得焦点，变为活动状态');
});

document.addEventListener('blur', function() {
    console.log('浏览器窗口失去焦点，不再是活动状态');
});

通过上述代码，我们可以在控制台中看到窗口焦点变化时相应的提示信息。在实际应用中，我们可以在这些事件处理函数里执行更复杂的操作，比如暂停视频播放：

const videoPlayer = document.getElementById('videoPlayer');

document.addEventListener('blur', function() {
    videoPlayer.pause();
});

document.addEventListener('focus', function() {
    videoPlayer.play();
});

使用 visibilitychange 事件

visibilitychange 事件在页面的可见性发生变化时触发。当页面从可见变为不可见（比如切换到其他窗口），或者从不可见变为可见时都会触发这个事件。示例代码如下：

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        console.log('浏览器窗口变为可见，处于活动状态');
    } else {
        console.log('浏览器窗口变为不可见，不处于活动状态');
    }
});

通过以上几种方法，我们可以灵活地判断浏览器窗口是否为活动状态，并根据不同的状态执行相应的操作，从而为用户提供更优质的交互体验。