Bagaimanakah Saya Boleh Mengesan Ketidakaktifan Tetingkap Penyemak Imbas Menggunakan 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);

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"});
})();

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!