如何使用 JavaScript 检测不活动的浏览器 Windows？

检测不活动的浏览器窗口

使用 JavaScript 时，确定浏览器窗口当前是否处于不活动状态可能会很有帮助。这使您可以通过在用户未查看页面时停止不必要的任务来优化性能。

利用页面可见性 API

检测浏览器不活动的可靠方法是通过页面可见性 API。此 API 提供了一个“hidden”属性，指示该页面是否对用户可见。

document.addEventListener("visibilitychange", onchange);

如果“hidden”属性为 true，则该页面当前不处于活动状态。您可以使用此信息相应地暂停或最小化 JavaScript 操作。

浏览器兼容性

最新版本的主要浏览器（包括 Chrome、 Internet Explorer、Firefox 和 Opera。

不兼容的后备浏览器

对于不支持页面可见性 API 的浏览器，您可以回退到模糊/聚焦方法。这些事件不太可靠，但可以提供基本级别的检测。

(function() {
  var hidden = "hidden";

  // ... (code for fallbacks to blur/focus)
})();

实现示例

下面的代码演示了如何使用页面可见性 API以及检测非活动浏览器窗口的后备方法：

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);
else if ("onfocusin" in document)
  document.onfocusin = document.onfocusout = onchange;
else
  window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

function onchange(evt) {
  var v = "visible", h = "hidden",
      evtMap = {
        focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h
      };

  evt = evt || window.event;
  if (evt.type in evtMap)
    document.body.className = evtMap[evt.type];
  else
    document.body.className = this[hidden] ? "hidden" : "visible";
}

// Set the initial state
if (document[hidden] !== undefined)
  onchange({ type: document[hidden] ? "blur" : "focus" });

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