首頁  >  文章  >  web前端  >  利用HTML5 Page Visibility API實作頁面可見性控制

利用HTML5 Page Visibility API實作頁面可見性控制

WBOY
WBOY原創
2023-09-03 08:37:02813瀏覽

重写后的标题为:利用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 在許多不同的場景中。

  1. #假設您在儀表板上,頁面正在定期(例如兩分鐘)輪詢某些 RSS 提要或 API 的詳細資訊。因此,如果頁面對使用者不可見(即使用者實際上並未查看頁面),我們可以限制對 RSS 提要或 API 的呼叫。
  2. 用於影像滑桿。我們可以在頁面隱藏時限制滑桿影像的移動。

  3. 以類似的方式,我們可以只在頁面對使用者隱藏時顯示 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>

演示視圖

瀏覽器支援

如果您想查看瀏覽器對此 API 的支持,那麼我建議查看我可以使用嗎? 。但要以程式設計方式尋找瀏覽器支持,我建議閱讀本文來偵測對各種 HTML5 功能的支援。到目前為止,我們在幾乎所有主要和最新的瀏覽器中都對該 API 提供了很好的支援。

#結論

我想說,我們有一個非常好的 API,它只包含兩個屬性和一個事件。這樣,它可以輕鬆地與您現有的應用程式集成,這可能會對您的用戶體驗產生積極影響。最終,現在我們可以控制當我們的網站對使用者隱藏時我們的網站的行為。

#

以上是利用HTML5 Page Visibility API實作頁面可見性控制的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn