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

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

确定浏览器窗口当前是否不活动可以通过防止用户未与浏览器交互时执行不必要的代码来提高资源效率site.

页面可见性 API

最初，使用文档模糊/焦点事件是主要方法。不过，W3C 引入了更准确的方法：页面可见性 API。

document.addEventListener("visibilitychange", onchange);

当页面对用户可见或隐藏时，此 API 会通知您。

浏览器兼容性

页面可见性 API 支持以下版本：

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

不兼容浏览器的后备

适用于不兼容的浏览器支持Page Visibility API，下面的代码提供了后备：

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

  // Standards:
  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);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  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 (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

此代码确保与 IE 9 及更低版本以及使用 onpageshow 和 onpagehide 而不是模糊/焦点事件的 iOS 设备兼容。

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