Sebelum ini penyemak imbas kami tidak mempunyai ciri penyemakan imbas tab tetapi hari ini apabila anda melihat semua penyemak imbas yang tersedia, kami dapat melihat bahawa semua penyemak imbas menawarkan ciri ini. Sebagai pengaturcara, saya biasanya mempunyai 10-15 tab terbuka pada satu masa, dan kadangkala nombor ini melebihi 25-30.
Sebelum ini, tiada cara untuk menentukan tab mana yang aktif dan tab mana yang aktif, tetapi dengan API Keterlihatan HTML5 kami boleh mengesan jika pelawat melihat halaman web kami.
Dalam tutorial ini, kita akan belajar cara menangani API Keterlihatan HTML5 dan demonstrasi mudah untuk mengetahui keadaan halaman. Dalam demo ini, kami akan menukar tajuk dokumen berdasarkan keadaan keterlihatan halaman.
Dengan pelancaran API ini, kami mengalu-alukan dua sifat dokumen baharu yang mempunyai dua fungsi berbeza. Yang pertama ialah document.visibilityState dan yang kedua ialah document.hidden. document.visibilityState，第二个是 document.hidden。
document.visibilityState 包含四个不同的值，如下所示：
document.hidden 是布尔属性，如果页面可见则设置为 false，如果页面隐藏则设置为 true。
现在，当我们的网站对用户隐藏时，我们可以控制网站的行为方式。
我们立刻就知道了我们的可用性属性，但现在是时候侦听该事件了，以便我们可以收到有关页面可见性的新情况的通知。这是通过 visibilitychange
document.visibilityState mengandungi empat nilai berbeza seperti berikut:
Sembunyikan: Halaman tidak kelihatan pada mana-mana skrin
Prapaparan: Halaman dimuatkan di luar skrin dan tidak kelihatan kepada pengguna
document.hidden ialah sifat boolean yang ditetapkan kepada palsu jika halaman kelihatan dan ditetapkan kepada benar jika halaman itu tersembunyi.
Kini kami boleh mengawal bagaimana tapak kami berkelakuan apabila ia disembunyikan daripada pengguna.Kami mengetahui sifat ketersediaan kami serta-merta, tetapi kini tiba masanya untuk mendengar acara tersebut supaya kami boleh dimaklumkan tentang situasi baharu mengenai keterlihatan halaman. Ini dilakukan melalui acara
visibilitychange. Kita akan melihat demonstrasi pantas tentang cara mengendalikan acara ini. document.addEventListener('visibilitychange', function(event) {
if (!document.hidden) {
// The page is visible.
} else {
// The page is hidden.
}
});
// Get Browser-Specifc Prefix
function getBrowserPrefix() {
// Check for the unprefixed property.
if ('hidden' in document) {
return null;
}
// All the possible prefixes.
var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];
for (var i = 0; i < browserPrefixes.length; i++) {
var prefix = browserPrefixes[i] + 'Hidden';
if (prefix in document) {
return browserPrefixes[i];
}
}
// The API is not supported in browser.
return null;
}
// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
if (prefix) {
return prefix + 'Hidden';
} else {
return 'hidden';
}
}
// Get Browser Specific Visibility State
function visibilityState(prefix) {
if (prefix) {
return prefix + 'VisibilityState';
} else {
return 'visibilityState';
}
}
// Get Browser Specific Event
function visibilityEvent(prefix) {
if (prefix) {
return prefix + 'visibilitychange';
} else {
return 'visibilitychange';
}
}
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
document.addEventListener(visibilityEvent, function(event) {
if (!document[hidden]) {
// The page is visible.
} else {
// The page is hidden.
}
});
Di manakah kita boleh menggunakan API ini?
Untuk peluncur imej. Kita boleh mengehadkan pergerakan imej peluncur apabila halaman disembunyikan.
Dengan cara yang sama, kami boleh menunjukkan pemberitahuan HTML hanya apabila halaman disembunyikan daripada pengguna.
Demo
Demo 1: Demo ini menunjukkan cara menggunakan API Keterlihatan Halaman untuk menukar tajuk halaman. Lihat demo
Demo 2: Demo ini menunjukkan cara untuk menyekat data pengundian daripada pelayan apabila halaman tidak aktif.
🎜 🎜Dalam demo ini kita akan melihat bagaimana untuk menyekat tinjauan pendapat pelayan untuk maklumat terkini, tetapi hanya semasa pengguna melihat halaman. Saya mengandaikan jQuery sudah disertakan dalam halaman anda. Di sini kami hanya akan menambah kiraan, tetapi ini boleh digantikan dengan pengundian pelayan sebenar. 🎜🎜🎜 🎜HTML🎜🎜 🎜
<!-- This element will show updated count --> <h1 id="valueContainer">0</h1>
<script type="text/javascript">
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
var timer = null;
function increaseVal() {
var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
$('#valueContainer').text(newVal);
document.title = newVal + ': Running';
timer = setTimeout(function() {
increaseVal();
}, 1);
}
// Visibility Change
document.addEventListener(visibilityEvent, function(event) {
if (document[hidden]) {
clearTimeout(timer);
var val = parseInt($('#valueContainer').text());
document.title = val + ': Pause';
} else {
increaseVal();
}
});
increaseVal();
</script>
Atas ialah kandungan terperinci Laksanakan kawalan keterlihatan halaman menggunakan HTML5 Page Visibility API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
