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.
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.
API Keterlihatan Halaman disokong oleh:
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!