如何使用 JavaScript 檢測瀏覽器視窗不活動？

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

許多網站執行的週期性活動可能會佔用大量資源。為了優化效能和使用者體驗，當使用者沒有主動查看頁面時暫停這些活動是有益的。

視窗不活動偵測的問題

決定是否使用者主動查看瀏覽器視窗或標籤是 Web 開發中的一個基本挑戰。 window.onfocus 和 window.onblur 事件提供基本功能，但它們可能不可靠，因為使用者可以在不離開視窗的情況下將焦點移動到其他標籤或應用程式。

解決方案：頁面可見性 API

頁面可見性 API 是解決此問題的現代且可靠的解決方案。大多數主要瀏覽器都支援此 API，它提供了一種檢測頁面或選項卡何時從使用者視圖中隱藏的方法。

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Pause periodic activities
  } else {
    // Resume periodic activities
  }
});

不幸的是，IE 10 及更早版本不支援此 API。對於這些較舊的瀏覽器，可以使用涉及 onblur/onfocus 和 onpageshow/onpagehide 事件的不太可靠的回退。

var hidden = "hidden";

// Compatibility checks
if (hidden in document) {
  // Supported: Page Visibility API
} else if ((hidden = "mozHidden") in document) {
  // Mozilla-specific
} else if ((hidden = "webkitHidden") in document) {
  // WebKit-based
} else if ((hidden = "msHidden") in document) {
  // Microsoft-specific
} else {
  // Legacy events
}

function onchange(evt) {
  if (evt.type in evtMap) {
    document.body.className = evtMap[evt.type];
  } else {
    document.body.className = this[hidden] ? "hidden" : "visible";
  }
}

透過利用頁面可見性 API 及其回退，您可以有效地偵測視窗不活動狀態並最佳化您的瀏覽器。對應的程式碼性能。

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