Pengenalan terperinci dan contoh penggunaan kemahiran tutorial HTML5 visibilityState attribute

Rumah

hujung hadapan web

Tutorial H5

Pengenalan terperinci dan contoh penggunaan kemahiran tutorial HTML5 visibilityState attribute_html5

May 16, 2016 pm 03:48 PM

html5

Perlu diterangkan di sini bahawa "pengaktifan" ini merujuk kepada sama ada label ini sedang dilayari oleh pengguna, atau sama ada ia adalah label semasa.

Jadi, untuk apa sebenarnya API ini digunakan? Biasanya, banyak halaman tradisional akan terus berfungsi apabila pengguna tidak mengaktifkannya Contohnya, apabila pengguna melayari portal berita, halaman permainan NBA yang dibukanya sebelum ini akan terus dimuat semula untuk mendapatkan hasil terkini, dan laman web video akan. terus menduduki jalur lebar Memuatkan sumber, jadi jika terlalu banyak kerja yang tidak perlu, ia akan menyebabkan banyak pembaziran sumber. Oleh itu, produk ini agak berguna:

1. Program Web akan mengemas kini maklumat halaman secara automatik sekali-sekala untuk memastikan pengguna mendapat maklumat tepat pada masanya, namun, apabila pengguna menyemak imbas halaman lain, mereka boleh mengawalnya untuk menjeda kemas kini.
2. Tapak web video akan terus memuatkan video apabila memainkan video dalam talian sehingga video dimuatkan Namun, apabila pengguna menyemak imbas halaman lain, mereka boleh menjeda pemuatan sumber video untuk menjimatkan lebar jalur.
3. Terdapat tayangan slaid besar pada halaman utama tapak web yang dimainkan secara automatik Apabila pengguna menyemak imbas halaman lain, main semula boleh dijeda.

Jadi, melalui Keterlihatan Halaman, kami boleh mencapai sekurang-kurangnya satu atau lebih manfaat berikut:

1. Menyimpan sumber pelayan seperti tinjauan pendapat Ajax sering diabaikan Mematikan permintaan jenis ini boleh menjimatkan sumber.
2. Menjimatkan penggunaan memori.
3. Menjimatkan penggunaan lebar jalur.

Oleh itu, menggunakan Keterlihatan Halaman mempunyai faedah untuk kedua-dua pengguna dan pelayan.

Berikut ialah pengenalan rasmi kepada API ini. Keterlihatan Halaman menambah dua sifat tersembunyi dan keterlihatanState pada objek dokumen penyemak imbas. Jika teg semasa diaktifkan, nilai document.hidden adalah palsu , jika tidak ia benar . visibilityState mempunyai 4 kemungkinan nilai:

1.tersembunyi: Apabila penyemak imbas diminimumkan, tab ditukar atau komputer dikunci, nilai visibilityState disembunyikan
2.boleh dilihat: Apabila dokumen konteks peringkat atas penyemak imbas dipaparkan pada sekurang-kurangnya satu skrin, boleh dilihat dikembalikan apabila tetingkap penyemak imbas tidak diminimumkan tetapi penyemak imbas disekat oleh aplikasi lain, ia juga kelihatan
3.prapaparan: Mengembalikan prapaparan apabila dokumen dimuatkan di luar skrin atau tidak kelihatan Ini adalah atribut yang tidak penting dan penyemak imbas boleh menyokongnya secara pilihan.
4.unloaded: Mengembalikan dipunggah apabila dokumen akan ditinggalkan (memunggah penyemak imbas juga boleh menyokong atribut ini

Selain itu, acara perubahan keterlihatan akan ditambahkan pada dokumen, yang dicetuskan apabila keterlihatan dokumen berubah.

Baiklah, selepas memperkenalkan atribut, mari kita masukkan contoh penggunaan (salin kod dan simpan pada fail HTML, buka dan tukar tag untuk menguji kesan).

Salin kod

Kod tersebut adalah seperti berikut:

<!doctype html>
<html lang="zh-CN">
<kepala>
<meta charset="UTF-8" />
<title>Uji API Keterlihatan Halaman HTML5</title>
</head>
<badan></p> <p> <div id="showTip"></div>
<skrip>
fungsi browerKernel(){
hasil var;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p> <p> jika( jenis dokumen[ awalan 'Tersembunyi' ] != 'tidak ditentukan' ){
hasil = awalan;
}
});
pulangkan hasil;
}
fungsi init(){
awalan = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( awalan 'perubahan keterlihatan', fungsi padaVisibilityChange(e){
var tip = null; if( document[ prefix 'VisibilityState' ] == 'tersembunyi' ) tip = '<p>Tinggalkan halaman</p>';
else if( document[ prefix 'VisibilityState' ] == 'visible' ) tip = '<p>Masukkan halaman</p>';
showTip.innerHTML = showTip.innerHTML tip;
});
}
window.onload = init();
</skrip>
</body>
</html>

Tujuan kejadian ini adalah untuk memantau sama ada keterlihatan label berubah dan menjana gesaan apabila keterlihatan label berubah.

Perlu diambil perhatian bahawa pada masa ini, penyemak imbas masih menyokong Keterlihatan Halaman melalui atribut peribadi, jadi apabila mengesan atau menggunakan atribut yang disediakan oleh Keterlihatan Halaman, anda perlu menambah awalan peribadi penyemak imbas, seperti mengesan perkara di atas dalam sifat Chrome visibilityState , anda perlu mengesan document.webkitVisibilityState dan bukannya document.visibilityState. Oleh itu, Demo akan terlebih dahulu mengesan jenis penyemak imbas dan kemudian menggunakan API Keterlihatan Halaman.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn