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

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

當使用者離開網站時，暫停某些活動可能會有所幫助。傳統上，JavaScript 缺乏可靠的方法來偵測視窗不活動。幸運的是，網路標準和頁面可見性 API 的進步使這一切成為可能。

頁面可見性 API

頁面可見性 API 允許開發人員確定網站的可見性狀態。透過訂閱「visibilitychange」事件，您可以偵測視窗何時變得可見或隱藏。此API 的瀏覽器支援包括：

• Chrome 13
• Internet Explorer 10
• Firefox 10
• Operper>
Firefox 10

document.addEventListener("visibilitychange", onchange);

Operper>

Firefox 10

Operpera>Operper>

(function() {
  // Check for standards support
  var hidden = "hidden";
  if (hidden in document) {
    document.addEventListener("visibilitychange", onchange);
  } else if ((hidden = "mozHidden") in document) {
    document.addEventListener("mozvisibilitychange", onchange);
  } else if ((hidden = "webkitHidden") in document) {
    document.addEventListener("webkitvisibilitychange", onchange);
  } else if ((hidden = "msHidden") in document) {
    document.addEventListener("msvisibilitychange", onchange);
  }
  
  // Fallback for IE 9+
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = onchange;
  }
  
  // Event mapping
  function onchange(evt) {
    var hiddenMapping = {
      focus: "visible",
      focusin: "visible",
      pageshow: "visible",
      blur: "hidden",
      focusout: "hidden",
      pagehide: "hidden"
    };
  
    evt = evt || window.event;
    if (evt.type in hiddenMapping) {
      document.body.className = hiddenMapping[evt.type];
    } else {
      document.body.className = document[hidden] ? "hidden" : "visible";
    }
  }
  
  // Set initial state
  if (document[hidden] !== undefined) {
    onchange({
      type: document[hidden] ? "blur" : "focus"
    });
  }
})();

不相容的後備瀏覽器

對於不支援 Page Visibility API 的瀏覽器，您可以使用基於「模糊」和「焦點」等事件的回退方法。此方法不太可靠，但可以用來實現類似的功能。

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

範例實作

以下範例顯示如何使用頁面可見性API 在發生以下情況時暫停腳本執行：瀏覽器視窗處於非活動狀態： 透過利用頁面可見性API 和JavaScript 事件處理，您現在可以根據以下情況有效地暫停或恢復活動：瀏覽器視窗的可見性狀態。

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