JavaScript 如何检测不活动的浏览器窗口？

使用 JavaScript 检测不活动的浏览器窗口

当用户离开网站时，暂停某些活动可能会有所帮助。传统上，JavaScript 缺乏可靠的方法来检测窗口不活动。幸运的是，网络标准和页面可见性 API 的进步使这成为可能。

页面可见性 API

页面可见性 API 允许开发人员确定网站的可见性状态。通过订阅“visibilitychange”事件，您可以检测窗口何时变得可见或隐藏。该 API 的浏览器支持包括：

• Chrome 13
• Internet Explorer 10
• Firefox 10
• Opera 12.10

document.addEventListener("visibilitychange", onchange);

不兼容的后备浏览器

对于不支持 Page Visibility API 的浏览器，您可以使用基于“模糊”和“焦点”等事件的回退方法。此方法不太可靠，但可以用来实现类似的功能。

(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"
    });
  }
})();

示例实现

以下示例展示了如何使用页面可见性 API 在发生以下情况时暂停脚本执行：浏览器窗口处于非活动状态：

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

通过利用页面可见性 API 和 JavaScript 事件处理，您现在可以根据以下情况有效地暂停或恢复活动：浏览器窗口的可见性状态。

以上是JavaScript 如何检测不活动的浏览器窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！