JavaScript はブラウザ ウィンドウの非アクティブをどのように検出できますか?

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

ブラウザ ウィンドウがアクティブにフォーカスされていないかを判断することは、パフォーマンスとユーザー エクスペリエンスを最適化するために不可欠です。 JavaScript には、これを実現するためのいくつかのオプションが用意されています。

Page Visibility API

Page Visibility API は、ページがユーザーに対して非表示になったことを検出するための信頼できる方法を提供します。この API は、Chrome、Firefox、Internet Explorer などの最新のブラウザでサポートされています。

Page Visibility API を使用するには、次のイベント リスナーを追加します。

document.addEventListener("visibilitychange", onchange);

onchange 関数内document.visibilityState プロパティをチェックして、ページが非表示かどうかを判断できます。表示可能:

function onchange(evt) {
  if (document.visibilityState == "hidden") {
    // Page is not active
  } else {
    // Page is active
  }
}

ブラー/フォーカス イベントへのフォールバック

Page Visibility API をサポートしていないブラウザの場合は、ブラー イベントとフォーカス イベントの使用にフォールバックできます。 。このメソッドは、ユーザーがタブを切り替えたりモーダル ウィンドウを表示したときにトリガーされる可能性があるため、信頼性が低くなります。

ブラー/フォーカス イベントを使用するには、次のイベント リスナーを追加します。

window.onblur = function() {
  // Window is not active
};

window.onfocus = function() {
  // Window is active
};

互換性に関する考慮事項

Page Visibility API はほとんどの主要なブラウザでサポートされていますが、ブラー/フォーカス イベントは、最新のすべてのブラウザでサポートされています。互換性を最大限に高めるために、サポートされている場合は Page Visibility API を使用し、サポートされていない場合はブラー/フォーカス イベントにフォールバックすることを検討してください。

これらの手法を実装すると、ブラウザ ウィンドウがアクティブにフォーカスされていないことを効果的に検出し、表示を調整できます。それに応じて JavaScript を使用すると、Web サイトのパフォーマンスとユーザー エクスペリエンスが向上します。

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