如何使用 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时,它不会进入睡眠模式。