Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mengesan Ketidakaktifan Tetingkap Penyemak Imbas Menggunakan JavaScript?

Bagaimanakah Saya Boleh Mengesan Ketidakaktifan Tetingkap Penyemak Imbas Menggunakan JavaScript?

DDD
Lepaskan: 2024-12-24 20:18:18
asal
731 orang telah melayarinya

How Can I Detect Browser Window Inactivity Using JavaScript?

Mengesan Ketidakaktifan Tetingkap Penyemak Imbas dengan JavaScript

Menentukan sama ada tetingkap penyemak imbas tidak aktif pada masa ini boleh meningkatkan kecekapan sumber dengan menghalang pelaksanaan kod yang tidak perlu apabila pengguna tidak berinteraksi dengan tapak.

API Keterlihatan Halaman

Pada mulanya, menggunakan dokumen peristiwa kabur/fokus ialah pendekatan utama. Walau bagaimanapun, W3C telah memperkenalkan kaedah yang lebih tepat: API Keterlihatan Halaman.

document.addEventListener("visibilitychange", onchange);
Salin selepas log masuk

API ini memberitahu anda apabila halaman itu kelihatan atau tersembunyi kepada pengguna.

Keserasian Pelayar

API Keterlihatan Halaman disokong oleh:

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

Fallback untuk Penyemak Imbas Tidak Serasi

Untuk pelayar yang tidak menyokong API Keterlihatan Halaman, kod berikut menyediakan a sandaran:

(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"});
})();
Salin selepas log masuk

Kod ini memastikan keserasian dengan IE 9 dan lebih rendah, serta peranti iOS yang menggunakan onpageshow dan onpagehide dan bukannya acara kabur/fokus.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Ketidakaktifan Tetingkap Penyemak Imbas Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan