JavaScript を使用して非アクティブなブラウザ Windows を検出するにはどうすればよいですか?

非アクティブなブラウザ ウィンドウの検出

JavaScript を使用する場合、ブラウザ ウィンドウが現在非アクティブかどうかを判断すると有益です。これにより、ユーザーがページを表示していないときに不要なタスクを停止してパフォーマンスを最適化できます。

Page Visibility API の利用

ブラウザの非アクティブを検出する信頼性の高い方法は、次のとおりです。ページ可視性 API を介して。この API は、ページがユーザーに表示されるかどうかを示す「hidden」プロパティを提供します。

document.addEventListener("visibilitychange", onchange);

「hidden」プロパティが true の場合、ページは現在アクティブではありません。この情報を使用して、必要に応じて JavaScript 操作を一時停止または最小化できます。

ブラウザの互換性

Page Visibility API は、Chrome などの主要なブラウザの最新バージョンでサポートされています。 Internet Explorer、Firefox、Opera。

互換性がない場合のフォールバックブラウザ

Page Visibility API をサポートしていないブラウザの場合は、ぼかし/フォーカス メソッドにフォールバックできます。これらのイベントの信頼性は低くなりますが、基本的なレベルの検出を提供できます。

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

  // ... (code for fallbacks to blur/focus)
})();

実装例

以下のコードは、Page Visibility API の使用方法を示しています。非アクティブなブラウザ ウィンドウを検出するフォールバック メソッド:

var hidden = "hidden";

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);
else if ("onfocusin" in document)
  document.onfocusin = document.onfocusout = onchange;
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
if (document[hidden] !== undefined)
  onchange({ type: document[hidden] ? "blur" : "focus" });

以上がJavaScript を使用して非アクティブなブラウザ Windows を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。