[解決済み] ブラウザのウィンドウが現在アクティブでないことを検出する方法はありますか？

質問

定期的に活動しているJavaScriptがあります。ユーザーがサイトを見ていないとき（つまり、ウィンドウやタブにフォーカスがないとき）、実行されないといいのですが、どうしたらいいですか？

JavaScriptでこれを実現する方法はありますか？

私が参考にしたのは Gmail チャットでは、使用しているウィンドウがアクティブでない場合、サウンドが再生されます。

解決するには？

この回答を書いている間に、新しい仕様が発表されました。 推奨 W3Cのおかげでステータスが上がりました。 その ページ可視化API は MDN ) が、ページがユーザーに対して非表示であることをより正確に検出できるようになりました。

document.addEventListener("visibilitychange", onchange);

現在の対応ブラウザ。

• Chrome 13 以上
• インターネットエクスプローラ10以上
• Firefox 10 以上
• Opera 12.10 以上 ^{[ メモを読む ]}

以下のコードは、互換性のないブラウザでは、信頼性の低いblur/focusメソッドにフォールバックします。

(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 は IE9以下では必須 を使用し、それ以外のものは onfocus と onblur を使用するiOSを除く。 onpageshow と onpagehide .