Bagaimanakah Saya Boleh Mengesan Ketidakaktifan Tetingkap Penyemak Imbas dengan JavaScript?

Mengesan Ketidakaktifan Tetingkap Penyemak Imbas dengan JavaScript

Banyak tapak web melakukan aktiviti berkala yang boleh intensif sumber. Untuk mengoptimumkan prestasi dan pengalaman pengguna, adalah berfaedah untuk menjeda aktiviti ini apabila pengguna tidak melihat halaman secara aktif.

Isu Pengesanan Ketidakaktifan Tetingkap

Menentukan sama ada a pengguna sedang aktif melihat tetingkap atau tab penyemak imbas adalah cabaran asas dalam pembangunan web. Acara window.onfocus dan window.onblur menyediakan kefungsian asas, tetapi ia mungkin tidak boleh dipercayai kerana pengguna boleh mengalihkan fokus ke tab atau aplikasi lain tanpa meninggalkan tetingkap.

Penyelesaian: API Keterlihatan Halaman

Penyelesaian moden dan boleh dipercayai untuk masalah ini ialah API Keterlihatan Halaman. Disokong oleh kebanyakan penyemak imbas utama, API ini menyediakan cara untuk mengesan apabila halaman atau tab disembunyikan daripada paparan pengguna.

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

Malangnya, API ini tidak disokong oleh IE 10 dan lebih awal. Untuk penyemak imbas yang lebih lama ini, sandaran yang kurang andal melibatkan acara onblur/onfocus dan onpageshow/onpagehide boleh digunakan.

var hidden = "hidden";

// Compatibility checks
if (hidden in document) {
  // Supported: Page Visibility API
} else if ((hidden = "mozHidden") in document) {
  // Mozilla-specific
} else if ((hidden = "webkitHidden") in document) {
  // WebKit-based
} else if ((hidden = "msHidden") in document) {
  // Microsoft-specific
} else {
  // Legacy events
}

function onchange(evt) {
  if (evt.type in evtMap) {
    document.body.className = evtMap[evt.type];
  } else {
    document.body.className = this[hidden] ? "hidden" : "visible";
  }
}

Dengan menggunakan API Keterlihatan Halaman dan sandarannya, anda boleh mengesan ketidakaktifan tetingkap dengan berkesan dan mengoptimumkan anda prestasi kod sewajarnya.

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