数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用JavaScript检查浏览器标签当前是否处于活动状态？
用户可以在浏览器中打开多个标签页，并且可以检查浏览器中任何特定标签页当前是否处于活动状态。例如，如果您正在进行监考测试，您可以观察到只要您在浏览器中更改标签页，它就会检测到标签页已更改。
因此，检查浏览器标签页是否处于活动状态有很多应用和用途。本教程将教我们两种方法来检查浏览器标签页是否处于活动状态。
使用窗口对象的onblur()和onfocus()方法
窗口对象包含JavaScript中的不同方法。onblur()和onfocus()方法就是其中之一。我们也可以将onblur()和onfocus()方法与HTML元素一起使用。
在这里，我们将使用整个窗口的onblur()和onfocus()方法来检查标签页是否已更改。当用户在浏览器中更改标签页时，onblur方法会被调用；当用户再次回到当前活动标签页时，它会调用onfocus()方法。
此外，我们可以通过使用赋值运算符将函数表达式赋值给它们来覆盖onblur()和onfocus()方法。当用户更改标签页时，我们可以在函数表达式中实现我们想要的任何内容。
语法
用户可以按照以下语法使用onblur()和onfocus()方法来检查浏览器当前标签页是否处于活动状态。
window.onblur = function () {
// tab is changed
};
window.onfocus = function () {
// tab is active
};
在上面的语法中，我们通过将函数表达式赋值给它们来覆盖了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 += "You have clicked the button! </br>";
}
// The function will invoke when the user changes the tab
window.onblur = function () {
output.innerHTML += "browser tab is changed </br>";
};
// If users come back to the current tab again, the below function will invoke
window.onfocus = function () {
output.innerHTML += "Browser tab is again active! </br>";
};
</script>
</body>
</html>
在上面的输出中，用户可以看到，当他们更改标签页时，它会打印“浏览器标签页已更改！”；如果您再次返回到当前标签页，它会打印“浏览器标签页再次处于活动状态！”。
使用页面可见性API检查浏览器标签页是否处于活动状态
在JavaScript中，我们可以使用页面可见性API来检查当前标签页是处于活动状态、已关闭还是已最小化。每当用户更改标签页、将其最小化或再次打开它时，文档中都会触发visibilitychange事件。
我们可以使用文档的addEventListner()方法。我们可以将“visibilitychange”事件作为第一个参数，将回调函数作为第二个参数，以便在用户更改标签页时执行某些操作。
语法
用户可以按照以下语法使用页面可见性API来检测浏览器标签页的可见性状态。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// tab is changed
} else {
// tab is active
}
});
在上面的语法中，我们已将visibilitychange事件监听器添加到网页。
参数
visibilitychange − 当用户更改或最小化标签页时，将触发此事件。
document.hidden − 这是一个文档属性，根据当前标签页是否处于活动状态包含布尔值。
示例
在下面的示例中，我们使用上面语法中解释的页面可见性API来检查标签页是处于活动状态还是已关闭。用户可以更改标签页并再次返回到该标签页来观察输出。
<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"> Tab is active currently! <br /> </div>
<script>
let output = document.getElementById("output");
// add event listeners on the document for the visibilityChange event
document.addEventListener("visibilitychange", () => {
// use the document's hidden property to check if the current tab is active!
if (document.hidden) {
output.innerHTML += "browser tab is changed </br>";
} else {
output.innerHTML += "Browser tab is again active! </br>";
}
});
</script>
</body>
</html>
在本教程中，用户学习了如何检测浏览器中活动标签页。YouTube也使用相同的方法来检查您当前是否正在标签页中观看视频。如果您将浏览器保持打开状态一段时间，您的计算机将自动进入睡眠模式，但是当您观看YouTube时，它不会。
2万+ 浏览量
