Terokai API Keterlihatan Halaman HTML5

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

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)

Kini kami boleh mengawal bagaimana tapak kami berkelakuan apabila ia disembunyikan daripada pengguna.

document.addEventListener('visibilitychange', function(event) {
  if (!document.hidden) {
    // The page is visible.
  } else {
   // The page is hidden. 
  }
});

Salin selepas log masuk
• 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 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';
  }
}

Salin selepas log masuk
• Kami mempunyai semua sifat awalan penyemak imbas dan acara 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. 
    }
  });
  

  Salin selepas log masuk

  Di manakah kita boleh menggunakan API ini?

Andaikan anda berada di papan pemuka anda dan halaman itu mengundi pada selang masa yang tetap (katakan dua minit) untuk butiran beberapa suapan RSS atau API. 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.

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.

<!-- 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 Terokai API Keterlihatan Halaman HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!