有没有办法检测浏览器窗口当前是否处于活动状态? [英] Is there a way to detect if a browser window is not currently active?

问题描述

我有定期执行活动的 JavaScript.当用户没有在查看站点时(即窗口或选项卡没有焦点)，最好不要运行.

I have JavaScript that is doing activity periodically. When the user is not looking at the site (i.e., the window or tab does not have focus), it'd be nice to not run.

有没有办法使用 JavaScript 来做到这一点?

Is there a way to do this using JavaScript?

我的参考点:如果您使用的窗口未处于活动状态，Gmail 聊天会播放声音.

My reference point: Gmail Chat plays a sound if the window you're using isn't active.

推荐答案

自从最初编写此答案以来，由于 W3C，新规范已达到推荐状态.页面可见性 API(在 MDN) 现在允许我们更准确地检测页面何时对用户隐藏.

Since originally writing this answer, a new specification has reached recommendation status thanks to the W3C. The Page Visibility API (on MDN) now allows us to more accurately detect when a page is hidden to the user.

document.addEventListener("visibilitychange", onchange);

当前浏览器支持:

• Chrome 13+
• Internet Explorer 10+
• Firefox 10+
• Opera 12.10+ ^{[阅读笔记]}

以下代码回退到不兼容浏览器中不太可靠的模糊/聚焦方法:

The following code falls back to the less reliable blur/focus method in incompatible browsers:

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

onfocusin 和 onfocusout 是 IE 9 及更低版本需要，而其他所有版本都使用 onfocus 和 onblur，但 iOS 除外，它使用 onpageshow> 和 onpagehide.

onfocusin and onfocusout are required for IE 9 and lower, while all others make use of onfocus and onblur, except for iOS, which uses onpageshow and onpagehide.

这篇关于有没有办法检测浏览器窗口当前是否处于活动状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！