亚洲伊人久久成综合人影院,久久www免费人成精品香蕉,久久国产精品-久久精品

探索HTML5頁面可見性API

早些時候，我們的瀏覽器不具有選項卡式瀏覽功能，但今天，當您查看所有可用的瀏覽器時，我們可以看到所有瀏覽器都提供該功能。作為一名程序員，我通常一次打開 10-15 個選項卡，有時這個數字會超過 25-30 個。

為什么使用此 API？

之前，無法確定哪個選項卡處于活動狀態、哪個選項卡處于活動狀態，但借助 html5 Visibility API，我們可以檢測訪問者是否正在查看我們的網頁。

在本教程中，我們將了解如何處理 html5 Visibility API 以及一個簡單的演示來發現頁面的狀態。在此演示中，我們將根據頁面可見性狀態更改文檔標題。

立即學習“前端免費學習筆記（深入）”；

檢查頁面的可見性狀態

隨著此 API 的推出，我們迎來了兩個新的文檔屬性，它們具有兩種不同的功能。第一個是 document.visibilityState，第二個是 document.hidden。

document.visibilityState 包含四個不同的值，如下所示：

隱藏：頁面在任何屏幕上都不可見
預渲染：頁面在屏幕外加載并且對用戶不可見
可見：頁面可見
已卸載：頁面即將卸載（用戶正在離開當前頁面）

document.hidden 是布爾屬性，如果頁面可見則設置為 false，如果頁面隱藏則設置為 true。

現在，當我們的網站對用戶隱藏時，我們可以控制網站的行為方式。

我們立刻就知道了我們的可用性屬性，但現在是時候偵聽該事件了，以便我們可以收到有關頁面可見性的新情況的通知。這是通過 visibilitychange 事件完成的。我們將看到有關如何處理此事件的快速演示。

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  <p>我們擁有所有瀏覽器前綴屬性，并且事件已準備好應用。現在我們將相應地更改之前的代碼。</p> <pre class="brush:JavaScript;toolbal:false;">// 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.    } });

我們可以在哪里使用此 API？

我們可以考慮使用此 API 在許多不同的場景中。

假設您在儀表板上，頁面正在定期（例如兩分鐘）輪詢某些 RSS 提要或 API 的詳細信息。因此，如果頁面對用戶不可見（即用戶實際上并未查看頁面），我們可以限制對 RSS 提要或 API 的調用。
用于圖像滑塊。我們可以在頁面隱藏時限制滑塊圖像的移動。
以類似的方式，我們可以僅在頁面對用戶隱藏時顯示 HTML 通知。

到目前為止，我們已經看到了使用 HTML5 頁面可見性 API 的代碼，是時候立即采取一些行動了。

演示

演示 1：該演示展示了如何使用頁面可見性 API 來更改頁面標題。查看演示
演示 2：該演示演示了如何在頁面處于非活動狀態時限制從服務器輪詢數據。

在此演示中，我們將研究如何限制輪詢服務器以獲取最新信息，但僅限于用戶正在查看頁面時。我假設 jquery 已經包含在您的頁面中。這里我們將僅增加計數，但這可以替換為真實的服務器輪詢。

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>

演示視圖