早些時候,我們的瀏覽器不具有選項卡式瀏覽功能,但今天,當您查看所有可用的瀏覽器時,我們可以看到所有瀏覽器都提供該功能。作為一名程式設計師,我通常一次打開 10-15 個選項卡,有時這個數字會超過 25-30 個。
之前,無法確定哪個選項卡處於活動狀態、哪個選項卡處於活動狀態,但藉助 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 在許多不同的場景中。
到目前為止,我們已經看到了使用 HTML5 頁面可見性 API 的程式碼,是時候立即採取一些行動了。
在此演示中,我們將研究如何限制輪詢伺服器以獲取最新信息,但僅限於用戶正在查看頁面時。我假設 jQuery 已經包含在您的頁面中。這裡我們將僅增加計數,但這可以替換為真實的伺服器輪詢。
<!-- 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>
演示視圖
如果您想查看瀏覽器對此 API 的支持,那麼我建議查看我可以使用嗎? 。但要以程式設計方式尋找瀏覽器支持,我建議閱讀本文來偵測對各種 HTML5 功能的支援。到目前為止,我們在幾乎所有主要和最新的瀏覽器中都對該 API 提供了很好的支援。
我想說,我們有一個非常好的 API,它只包含兩個屬性和一個事件。這樣,它可以輕鬆地與您現有的應用程式集成,這可能會對您的用戶體驗產生積極影響。最終,現在我們可以控制當我們的網站對使用者隱藏時我們的網站的行為。
#以上是利用HTML5 Page Visibility API實作頁面可見性控制的詳細內容。更多資訊請關注PHP中文網其他相關文章!