javascript - 有没有一种方法可以检测浏览器窗口当前是否未激活？(Is there a way to detect if a browser window is not currently active?)

Question

I have JavaScript that is doing activity periodically.(我的JavaScript会定期进行活动。)

When the user is not looking at the site (ie, the window or tab does not have focus), it'd be nice to not run.(当用户不查看站点时（即窗口或选项卡没有焦点），最好不要运行。)

Is there a way to do this using JavaScript?(有没有办法使用JavaScript做到这一点？)

My reference point: Gmail Chat plays a sound if the window you're using isn't active.(我的参考点：如果您使用的窗口未激活，Gmail聊天会播放声音。)

  ask by Luke Francl translate from so

Answer 1

Since originally writing this answer, a new specification has reached recommendation status thanks to the W3C.(自从最初编写此答案以来，由于有了W3C，新的规范已达到推荐状态。)

The Page Visibility API (on MDN ) now allows us to more accurately detect when a page is hidden to the user.(现在， 页面可见性API （在MDN上 ）使我们能够更准确地检测页面何时向用户隐藏。)

document.addEventListener("visibilitychange", onchange);

Current browser support:(当前的浏览器支持：)

• Chrome 13+(铬13+)
• Internet Explorer 10+(Internet Explorer 10+)
• Firefox 10+(Firefox 10+)
• Opera 12.10+ ^{[ read notes ]}(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 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 .(对于IE 9及更低版本的IE 9，需要 onfocusin和onfocusout ，而除iOS使用onpageshow和onpagehide iOS之外，所有其他功能都需要使用onfocus和onblur 。)