Laksanakan kawalan keterlihatan halaman menggunakan HTML5 Page Visibility API

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.

Mengapa menggunakan API ini?

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.

Semak status 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

Kelihatan: Halaman itu kelihatan
Dimuat: Halaman akan dipunggah (pengguna meninggalkan halaman semasa)

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. 
  }
});

• Kod ini hanyalah contoh asas untuk menggunakan acara ini dan menemui keadaan semasa halaman web. Tetapi untuk pengetahuan anda, sifat dan kaedah ini semuanya harus didahulukan oleh vendor kerana peristiwa dan sifat ini diberi awalan vendor dalam sesetengah penyemak imbas. Sekarang kita akan melihat pelayar silang kod yang sama:

// 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';
  }
}

• Kami mempunyai semua atribut dan acara awalan pelayar sedia untuk digunakan. Sekarang kita akan menukar kod sebelumnya dengan sewajarnya.

  // 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?

Kami boleh mempertimbangkan untuk menggunakan API ini dalam banyak senario yang berbeza.

Andaikan anda berada di papan pemuka anda dan halaman itu mengundi beberapa suapan RSS atau butiran API pada selang masa yang tetap (katakan dua minit). Oleh itu, kami boleh mengehadkan panggilan kepada suapan RSS atau API jika halaman itu tidak kelihatan kepada pengguna (iaitu pengguna sebenarnya tidak melihat halaman tersebut).

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.

Setakat ini kami telah melihat kod menggunakan API Keterlihatan Halaman HTML5, sudah tiba masanya untuk mengambil tindakan segera.

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>

🎜JavaScript🎜🎜 🎜

<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>

🎜Demo View🎜 🎜Sokongan pelayar🎜 🎜Jika anda ingin menyemak sokongan penyemak imbas untuk API ini, maka saya syorkan anda menyemak Bolehkah saya menggunakannya? . Tetapi untuk mencari sokongan penyemak imbas secara pengaturcaraan, saya mengesyorkan membaca artikel ini untuk mengesan sokongan untuk pelbagai ciri HTML5. Setakat ini, kami mempunyai sokongan yang baik untuk API ini dalam hampir semua pelayar utama dan terkini. 🎜🎜🎜 🎜Kesimpulan🎜🎜 🎜 🎜Saya akan mengatakan bahawa kami mempunyai API yang sangat bagus yang hanya terdiri daripada dua sifat dan satu acara. Dengan cara ini, ia boleh disepadukan dengan mudah dengan aplikasi sedia ada anda, yang mungkin memberi kesan positif kepada pengalaman pengguna anda. Akhir sekali, kini kami boleh mengawal bagaimana tapak kami berkelakuan apabila ia disembunyikan daripada pengguna. 🎜🎜🎜

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!