Komentar: Kami telah lama kehilangan metode untuk menentukan apakah pengguna menjelajahi tab yang ditentukan. Sudahkah pengguna mengunjungi situs web lain? Sudahkah mereka beralih kembali?
Sekarang, antarmuka visibilitas halaman di HTML5 memberikan pemrogram dengan metode untuk menggunakan acara VisibilityChange untuk menilai status visibilitas halaman saat ini dan melakukan tugas -tugas tertentu dengan cara yang ditargetkan. Ada juga dokumen baru. Properti tersembunyi yang dapat digunakan.
dokumen.hidden
Dokumen yang baru muncul ini. Properti Hidden menunjukkan apakah halaman tersebut adalah halaman yang saat ini dilihat oleh pengguna, dengan nilai Ture atau False.
Document.visibilityState
Nilai VisibilitasState terlihat (menunjukkan bahwa halaman saat ini diaktifkan oleh browser, dan jendela tidak diminimalkan), atau disembunyikan (halaman saat ini tidak diaktifkan oleh halaman tab, atau jendela diminimalkan.), Atau Prerender (halaman tersebut regenerasi dan tidak terlihat oleh pengguna.).
Acara VisibilityChange
Sangat mudah untuk mendengarkan perubahan visibilitas halaman:
// kompatibel dengan berbagai browser
var hidden, state, visibilitychange;
if (typeof document.hidden! == "tidak terdefinisi") {
tersembunyi = "tersembunyi";
VisibilityChange = "VisibilityChange";
state = "VisibilityState";
} lain jika (typeof document.mozhidden! == "tidak terdefinisi") {
tersembunyi = "mozhidden";
visibilitychange = "mozvisibilitychange";
state = "mozvisibilitystate";
} lain jika (typeof document.mshidden! == "tidak terdefinisi") {
tersembunyi = "msshidden";
visibilitychange = "msVisibilityChange";
state = "msVisibilityState";
} lain jika (typeof document.webkithidden! == "tidak terdefinisi") {
tersembunyi = "webkithidden";
VisibilityChange = "WebKitVisibilityChange";
state = "WebKitVisibilityState";
} </p> <p> // tambahkan pendengar untuk menampilkan perubahan status dalam judul
document.addeventlistener (visibilitychange, function () {
document.title = dokumen [state];
}, false); </p> <p> // inisialisasi
document.title = dokumen [state];
Kode di atas akan memodifikasi nilai dokumen. Judul saat visibilitas halaman berubah!
Jadi, kapan Anda perlu menggunakan acara VisibilityChange? Misalnya, jika ada video tertanam di halaman Anda yang diputar, ketika pengguna beralih ke tab lain, video pada tab Anda harus secara otomatis menghentikan pemutaran, dan terus diputar ketika pengguna beralih kembali. Misalnya, jika halaman Anda memiliki tindakan penyegaran otomatis, ketika pengguna beralih ke tab lain, Anda harus berhenti menyegarkan, dan melanjutkan tindakan sebelumnya ketika pengguna beralih kembali.