JavaScript 如何偵測瀏覽器視窗不活動？

使用JavaScript 偵測瀏覽器視窗不活動

確定瀏覽器視窗是否未主動獲得焦點對於最佳化效能和使用者體驗至關重要。 JavaScript 提供了多種選項來實現此目的。

頁面可見性 API

頁面可見性 API 提供了一種可靠的方法來偵測頁面何時對使用者隱藏。大多數現代瀏覽器都支援此 API，包括 Chrome、Firefox 和 Internet Explorer。

若要使用頁面可見性 API，請新增下列事件偵聽器：

document.addEventListener("visibilitychange", onchange);

在 onchange 函數中，您可以檢查 document.visibilityState屬性來決定頁面是否隱藏或可見：

function onchange(evt) {
  if (document.visibilityState == "hidden") {
    // Page is not active
  } else {
    // Page is active
  }
}

回退到模糊/焦點事件

對於不支援頁可見性API 的瀏覽器，您可以回退到使用模糊和焦點事件。此方法不太可靠，因為它可能會在使用者切換標籤或調出模態視窗時觸發。

要使用模糊/焦點事件，請新增以下事件偵聽器：

window.onblur = function() {
  // Window is not active
};

window.onfocus = function() {
  // Window is active
};

相容性注意事項

大多數主要瀏覽器都支援頁面可見性API，而模糊/焦點所有現代瀏覽器都支援事件。為了獲得最大的相容性，請考慮使用頁面可見性 API（如果支援），否則會回退到模糊/焦點事件。

透過實作這些技術，您可以有效地偵測瀏覽器視窗何時未處於焦點狀態並調整您的JavaScript 相應地提高了您網站的效能和使用者體驗。

以上是JavaScript 如何偵測瀏覽器視窗不活動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！