Komentar: HTML5 telah meluncurkan visibilitas halaman API yang sangat "khusus". Alasan mengapa ini istimewa adalah karena API ini berfokus pada fitur yang hanya sedikit diperhatikan oleh beberapa orang - apakah tag browser (tab) diaktifkan
Harus dijelaskan di sini bahwa "aktivasi" ini mengacu pada apakah tag sedang dijelajahi oleh pengguna, atau apakah itu tag saat ini.
Jadi, apa tujuan API ini? Biasanya, banyak halaman tradisional akan terus bekerja ketika pengguna tidak mengaktifkannya. Misalnya, ketika pengguna menjelajahi portal berita, dan halaman game NBA yang dibuka sebelumnya akan terus menyegarkan dan mendapatkan hasil terbaru, situs web video akan terus menempati bandwidth dan sumber daya muat. Oleh karena itu, jika terlalu banyak pekerjaan yang tidak perlu diperlukan, banyak limbah sumber daya akan disebabkan. Karena itu, ini cukup berguna:
1. Program Web akan secara otomatis memperbarui informasi halaman sesekali untuk memastikan bahwa pengguna mendapatkan informasi yang tepat waktu. Namun, ketika pengguna menelusuri halaman lain, itu dapat dikontrol untuk menjeda pembaruan.
2. Ketika situs web video memutar video online, itu akan terus memuat video sampai video dimuat. Namun, ketika pengguna menelusuri halaman lain, ia dapat menghentikan pemuatan sumber daya video untuk menyimpan bandwidth.
3. Ada slide besar di beranda situs web yang secara otomatis diputar. Ketika pengguna menelusuri halaman lain, pemutaran dapat dijeda.
Oleh karena itu, melalui visibilitas halaman, kita dapat mencapai setidaknya satu atau lebih manfaat berikut:
1. Simpan sumber daya server. Polling Ajax sering diabaikan. Tutup permintaan ini dapat menghemat sumber daya.
2. Simpan konsumsi memori.
3. Simpan konsumsi bandwidth.
Oleh karena itu, menggunakan visibilitas halaman bermanfaat bagi pengguna dan server.
Selanjutnya, mari kita perkenalkan API ini secara resmi. Visibilitas halaman menambahkan dua properti yang tersembunyi dan visibilitas di objek dokumen browser. Jika tag saat ini diaktifkan, nilai dokumen.hidden adalah salah, jika tidak benar. VisibilityState memiliki 4 kemungkinan nilai:
1.hidden: Ketika browser diminimalkan, tag diaktifkan, dan mengunci layar komputer, nilai visibilitas hidden
2. Visibel: Ketika dokumen konteks tingkat atas browser ditampilkan dalam setidaknya satu layar, ia kembali terlihat; Saat jendela browser tidak diminimalkan, tetapi browser diblokir oleh aplikasi lain, itu juga terlihat
3.Prerender: Mengembalikan prerender saat dokumen dimuat di luar layar atau tidak terlihat. Ini adalah properti yang tidak penting dan browser dapat secara selektif mendukungnya.
4.unloaded: return duploaded ketika dokumen akan dibiarkan (bongkar), dan browser juga dapat secara selektif mendukung properti ini.
Selain itu, acara VisibilityChange ditambahkan pada dokumen, yang dipicu ketika visibilitas dokumen berubah.
Oke, setelah memperkenalkan properti, masukkan contoh penggunaan (salin kode dan simpan ke file HTML, alihkan tag untuk menguji efek setelah pembukaan).
<! Doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8" />
<title> uji html5 halaman visibilitas API </iteme>
</head>
<body> </p> <p> <div> </div>
<script>
fungsi browserkernel () {
hasil var;
['WebKit', 'moz', 'o', 'ms']. foreach (function (prefix) {</p> <p> if (typeof document [prefix + 'hidden']! = 'tidak terdefinisi') {
hasil = awalan;
}
});
hasil pengembalian;
}
fungsi init () {
awalan = browserkernel ();
var showtip = document.geteLementById ('showtip');
document.addeventListener (awalan + 'visibilitas', fungsi onvisibilitychange (e) {
var tip = null;
if (dokumen [prefix + 'visibilitystate'] == 'hidden') tip = '<p> Biarkan halaman </p>';
lain jika (dokumen [awalan + 'visibilitasstate'] == 'visible') tip = '<p> Masukkan halaman </p>';
showtip.innerhtml = showtip.innerhtml + tip;
});
}
window.onload = init ();
</script>
</body>
</html>
Tujuan dari contoh ini adalah untuk memantau apakah visibilitas tag berubah dan menghasilkan prompt ketika visibilitas tag berubah.
Perlu dicatat bahwa saat ini, browser mendukung visibilitas halaman melalui atribut pribadi. Oleh karena itu, saat mendeteksi atau memanfaatkan properti yang disediakan oleh visibilitas halaman, Anda perlu menambahkan awalan privat browser. Misalnya, ketika mendeteksi properti VisibilityState di atas di Chrome, Anda perlu mendeteksi dokumen. Oleh karena itu, demo pertama akan mendeteksi jenis browser, dan kemudian menggunakan API visibilitas halaman.