Bagaimana untuk menentukan sama ada pengguna menyemak imbas halaman dalam kemahiran tutorial HTML5

Bagaimana untuk menentukan sama ada pengguna menyemak imbas halaman dalam kemahiran tutorial HTML5_html5

WBOY

Lepaskan： 2016-05-16 15:47:53

asal

1719 orang telah melayarinya

Kini, antara muka keterlihatan halaman dalam HTML5 menyediakan pengaturcara dengan kaedah yang membolehkan mereka menggunakan acara halaman perubahan keterlihatan untuk menentukan status keterlihatan halaman semasa dan melaksanakan tugas tertentu dengan cara yang disasarkan. Terdapat juga dokumen baharu.harta tersembunyi tersedia.

dokumen.tersembunyi

Atribut document.hidden baharu ini menunjukkan sama ada halaman tersebut ialah halaman yang sedang dilihat oleh pengguna Nilai itu benar atau salah.

document.visibilityState

Nilai visibilityState sama ada boleh dilihat (menunjukkan bahawa halaman itu ialah tab penyemak imbas yang sedang diaktifkan, dan tetingkap tidak diminimumkan), atau tersembunyi (halaman itu bukan halaman tab yang sedang diaktifkan, atau tetingkap diminimumkan .), atau prapaparan (halaman Menjana Semula, tidak kelihatan kepada pengguna ).

acara perubahan keterlihatan

Mendengar perubahan keterlihatan halaman adalah sangat mudah:

Salin kod

Kodnya adalah seperti berikut:

// Serasi dengan pelbagai pelayar
var tersembunyi, keadaan, keterlihatanTukar
if (typeof document.hidden !== "undefined") {
tersembunyi = "tersembunyi";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
tersembunyi = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
tersembunyi = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
tersembunyi = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

//Tambah pendengar untuk memaparkan perubahan status dalam tajuk
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, palsu);

//Permulaan
document.title = document[state];

Kod di atas akan mengubah suai nilai document.title apabila keterlihatan halaman berubah!

Jadi, bilakah anda perlu menggunakan acara visibilitychange? Sebagai contoh, jika anda mempunyai video terbenam yang dimainkan pada halaman anda, apabila pengguna beralih ke tab lain, video pada tab anda harus dijeda secara automatik dan menyambung semula bermain apabila pengguna beralih kembali. Untuk contoh lain, jika halaman anda mempunyai tindakan muat semula automatik, apabila pengguna beralih ke tab lain, anda harus berhenti memuat semula dan meneruskan tindakan sebelumnya apabila pengguna bertukar kembali.