JavaScript は非アクティブなブラウザ Windows をどのように検出できるのでしょうか?

JavaScript を使用した非アクティブなブラウザ Windows の検出

ユーザーが Web サイトから移動するとき、特定のアクティビティを一時停止すると有益な場合があります。従来、JavaScript にはウィンドウの非アクティブ状態を検出するための信頼できる方法がありませんでした。幸いなことに、Web 標準と Page Visibility API の進歩により、これが可能になりました。

Page Visibility API

Page Visibility API を使用すると、開発者は Web サイトの公開状態を判断できます。 「visibilitychange」イベントをサブスクライブすると、ウィンドウがいつ表示されるか非表示になるかを検出できます。 API のブラウザ サポートには以下が含まれます:

• Chrome 13
• Internet Explorer 10
• Firefox 10
• Opera 12.10

document.addEventListener("visibilitychange", onchange);

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

Page Visibility API をサポートしていないブラウザの場合は、「ぼかし」や「フォーカス」などのイベントに基づくフォールバック方法を使用できます。このメソッドは信頼性が低くなりますが、同様の機能を実現するために使用できます。

(function() {
  // Check for standards support
  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);
  }
  
  // Fallback for IE 9+
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = onchange;
  }
  
  // Event mapping
  function onchange(evt) {
    var hiddenMapping = {
      focus: "visible",
      focusin: "visible",
      pageshow: "visible",
      blur: "hidden",
      focusout: "hidden",
      pagehide: "hidden"
    };
  
    evt = evt || window.event;
    if (evt.type in hiddenMapping) {
      document.body.className = hiddenMapping[evt.type];
    } else {
      document.body.className = document[hidden] ? "hidden" : "visible";
    }
  }
  
  // Set initial state
  if (document[hidden] !== undefined) {
    onchange({
      type: document[hidden] ? "blur" : "focus"
    });
  }
})();

実装例

次の例は、ページ表示 API を使用して、スクリプトの実行を一時停止する方法を示しています。ブラウザ ウィンドウが非アクティブです:

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Pause script execution
  } else {
    // Resume script execution
  }
});

Page Visibility API と JavaScript イベント処理を活用することで、効果的に一時停止または再開できるようになりました。ブラウザウィンドウの表示状態に基づくアクティビティ。

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