如何检查浏览器选项卡是否处于活动状态且可见？答案

【问题标题】：How can I check if browser tab is active and visible?如何检查浏览器选项卡是否处于活动状态且可见？
【发布时间】：2020-11-23 09:49:39
【问题描述】：

我正在制作带有比赛的网站，我想检查浏览器中的用户标签是否处于活动状态且可见。例如，如果有人隐藏浏览器窗口或使用我的网站切换选项卡，则该选项卡将不会处于活动状态，我需要知道它。我可以这样做吗？

我知道 Firefox 可见性 API，但它只检查可见性。因此，如果屏幕上有两个窗口，其中一个是带有网站的浏览器窗口，则网站是可见的。但其他窗口可以处于活动状态，我的网站将可见，但不活动。这不是我想要的东西

【问题讨论】：

标签： javascript jquery web browser

【解决方案1】：

尝试：

document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );  
});

window.addEventListener('focus', function() {
 console.log("window is active!" );
});

window.addEventListener('blur', function() {
  console.warn("window is not active!" );
});

【讨论】：

在docs 中说The Document.hidden read-only property returns a Boolean value indicating if the page is considered hidden or not。所以，我可以打开两个窗口，但它不会像我想要的那样工作。

【解决方案2】：

好的，看来我需要使用document.hasFocus() (docs) js函数。如果选项卡不可见或其他窗口处于活动状态，则返回false，否则返回true

【讨论】：