如何使用 JavaScript 检查浏览器选项卡当前是否处于活动状态?
用户可以在浏览器中打开多个选项卡，还可以检查浏览器中任何特定选项卡当前是否处于活动状态。例如，如果您参加了监考考试，您可以观察到，每当您在浏览器中更改选项卡时，它都会检测到选项卡已更改
因此，可以有许多应用程序和用途来检查浏览器选项卡是否处于活动状态。本教程将教我们两种方法来检查浏览器的选项卡是否处于活动状态。
使用 window 对象的 onblur() 和 onfocus() 方法
window 对象包含 JavaScript 中的不同方法。onblur() 和 onfocus() 方法就是其中之一。我们还可以将 onblur() 和 onfocus() 方法与 HTML 元素结合使用。
在这里，我们将对整个窗口使用 onblur() 和 onfocus() 方法来检查选项卡是否已更改。当用户在浏览器中更改选项卡时，onblur 方法将调用，而当用户再次进入当前活动选项卡时，它将调用 onfocus() 方法。
此外，我们可以通过使用赋值操作将函数表达式分配给它们来覆盖 onblur() 和 onfocus() 方法。当用户更改选项卡时，我们可以在函数表达式中实现任何我们想要的功能。
语法
用户可以按照以下语法使用 onblur() 和 onfocus() 方法来检查浏览器的当前选项卡是否处于活动状态。
window.onblur = function () {
// 选项卡已更改
};
window.onfocus = function () {
// 选项卡处于活动状态
};
在上述语法中，我们通过为 onblur() 和 onfocus() 方法分配函数表达式来覆盖它们。
示例
在下面的示例中，我们创建了 callFunc()，它将在用户单击按钮时调用。此外，我们通过函数表达式覆盖了 onblur() 和 onfocus() 方法，当用户更改选项卡并再次返回同一选项卡时，该方法会打印不同的消息。
<html>
<body>
<h3>Using the <i> onblur and onfocus method </i> to detect if tab is active or not in the browser using JavaScript.</h3>
<div id = "output"> </div><br>
<button onclick = "callFunc()"> Click to show text </button>
<script>
let output = document.getElementById("output");
function callFunc() {
output.innerHTML += "您已单击按钮!</br>";
}
// 用户更改选项卡时将调用此函数
window.onblur = function () {
output.innerHTML += "浏览器选项卡已更改</br>";
};
// 如果用户再次返回当前选项卡，则将调用以下函数
window.onfocus = function () {
output.innerHTML += "浏览器选项卡再次处于活动状态!</br>";
};
</script>
</body>
</html>
在上面的输出中，用户可以看到，当他们更改选项卡时，它会打印"浏览器选项卡已更改!"，如果您再次返回当前选项卡，它会打印"浏览器选项卡再次处于活动状态!"。
使用页面可见性 API 检查浏览器的选项卡是否处于活动状态
在 JavaScript 中，我们可以使用页面可见性 API 检查当前选项卡是处于活动状态、关闭状态还是最小化状态。每当用户更改选项卡、最小化选项卡或再次打开选项卡时，文档中的visibilitychange 事件都会被触发。
我们可以使用文档的addEventListner()方法。我们可以将"visibilitychange"事件作为第一个参数传递，并将回调函数作为第二个参数传递，以在用户更改选项卡时执行某些活动。
语法
用户可以按照以下语法使用页面可见性 API 来检测浏览器选项卡的可见性状态。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// 选项卡已更改
} else {
// 选项卡处于活动状态
}
});
在上述语法中，我们已将visibilitychage事件侦听器添加到网页。
参数
visibilitychange − 当用户更改或最小化选项卡时将触发该事件。
document.hidden − 它是一个文档属性，根据当前选项卡是否处于活动状态包含布尔值。
示例
在下面的示例中，我们使用上述语法中解释的页面可见性 API 来检查选项卡是处于活动状态还是已关闭。用户可以更改选项卡并再次返回该选项卡以观察输出。
<html>
<body>
<h3>使用 <i> onblur 和 onfocus 方法 </i> 使用 JavaScript 检测浏览器中的选项卡是否处于活动状态。</h3>
<div id = "output"> 选项卡当前处于活动状态!<br /> </div>
<script>
let output = document.getElementById("output");
// 在文档上为visibilityChange事件添加事件监听器
document.addEventListener("visibilitychange", () => {
// 使用文档的hidden属性检查当前选项卡是否处于活动状态!
if (document.hidden) {
output.innerHTML += "浏览器选项卡已更改</br>";
} else {
output.innerHTML += "浏览器选项卡再次处于活动状态!</br>";
}
});
</script>
</body>
</html>
在本教程中，用户学习了如何检测浏览器中的活动选项卡。Youtube也使用相同的方法来检查您当前是否正在观看选项卡中的视频。如果您将浏览器保持打开状态一段时间，您的计算机会自动进入睡眠模式，但当您观看YouTube时，它不会进入睡眠模式。
