資料結構
網路
關係資料庫管理系統 (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萬+ 瀏覽量
