Javascript 有没有办法检测浏览器窗口当前是否处于活动状态

发布于06月30日

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

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

我的参考点是:如果你正在使用的窗口处于非活动状态，Gmail聊天就会播放声音.

推荐答案

自从最初写下这个答案以来，多亏了W3C，一个新的规范已经达到了recommendation个状态. Page Visibility API(在MDN上)现在允许我们更准确地检测用户何时隐藏页面.

document.addEventListener("visibilitychange", onchange);

当前浏览器支持:

chromium 13+
Internet Explorer 10+
Firefox 10+
Opera 12.10+^{[read notes]}

在不兼容的浏览器中，以下代码采用了不太可靠的模糊/聚焦方法:

(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是required for IE 9 and lower，而所有其他的都使用onfocus和onblur，除了iOS，iOS使用onpageshow和onpagehide.