利用HTML5 Page Visibility API實作頁面可見性控制-js教程-PHP中文網

重写后的标题为：利用HTML5 Page Visibility 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 < 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. 
  }
});

登入後複製

我們可以在哪裡使用此 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>

登入後複製

演示視圖