早些時候，我們的瀏覽器不具有選項卡式瀏覽功能，但今天，當您查看所有可用的瀏覽器時，我們可以看到所有瀏覽器都提供該功能。作為一名程式設計師，我通常一次打開 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>
登入後複製
演示視圖
瀏覽器支援
如果您想查看瀏覽器對此 API 的支持，那麼我建議查看我可以使用嗎？ 。但要以程式設計方式尋找瀏覽器支持，我建議閱讀本文來偵測對各種 HTML5 功能的支援。到目前為止，我們在幾乎所有主要和最新的瀏覽器中都對該 API 提供了很好的支援。
#結論
我想說，我們有一個非常好的 API，它只包含兩個屬性和一個事件。這樣，它可以輕鬆地與您現有的應用程式集成，這可能會對您的用戶體驗產生積極影響。最終，現在我們可以控制當我們的網站對使用者隱藏時我們的網站的行為。
#
以上是探索HTML5頁面可見性API的詳細內容。更多資訊請關注PHP中文網其他相關文章！
