ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してブラウザ ウィンドウの非アクティブを検出するにはどうすればよいですか?

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

DDD
リリース: 2024-12-24 20:18:18
オリジナル
731 人が閲覧しました

How Can I Detect Browser Window Inactivity Using JavaScript?

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

ブラウザ ウィンドウが現在アクティブでないかどうかを判断すると、ユーザーが操作していないときに不要なコードの実行が防止され、リソース効率が向上します。 site.

Page Visibility API

最初はドキュメントを使用ブラー/フォーカス イベントが主なアプローチでした。ただし、W3C は、より正確な方法である Page Visibility API を導入しました。

document.addEventListener("visibilitychange", onchange);
ログイン後にコピー

この API は、ページがユーザーに表示または非表示になったときに通知します。

ブラウザの互換性

Page Visibility API は以下でサポートされています:

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

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

互換性のないブラウザの場合Page Visibility API をサポートする場合、次のコードはfallback:

(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"});
})();
ログイン後にコピー

このコードは、IE 9 以前と、ぼかし/フォーカス イベントの代わりに onpageshow および onpagehide を使用する iOS デバイスとの互換性を保証します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート