摘要：原文譯文的頁面可視性譯者在早期，瀏覽器并沒有提供選項卡，但是現在基本所有瀏覽器都提供了這個功能。在這個中，將基于頁面的可視性狀態彈出文檔的標題。對于常見的手風情效果，當頁面不可見時，可以限制其移動。

原文：HTML5 Page Visibility API

譯文：HTML 5的頁面可視性API

譯者：dwqs

在早期，瀏覽器并沒有提供選項卡，但是現在基本所有瀏覽器都提供了這個功能。作為一個程序員，我一般會同時打開10到15個選項卡，甚至有些時候會在25到30.

之前，是不可能確定哪個選項卡是激活的，哪個沒有激活，但是在HTML 5 Visibility API的幫助下，就可以檢測用戶是否在瀏覽某個網站的頁面。

在這篇文章中，我們將會理解如何使用HTML 5 Visibility API，并且用一個小demo去發覺頁面的狀態。在這個demo中，將基于頁面的可視性狀態彈出文檔的標題。

為了使用Visibility API，我們要先了解兩個新的文檔屬性，第一個是document.visibilityState，另一個是document.hidden.它們的功能是不同的。

document.visibilityState有四個不同的值：

1、hidden：頁面在任何屏幕上不可見

2、prerender：頁面在加載，對用戶不可見

3、visible：頁面可見

4、unloaded：頁面卸載（即用戶將離開當前頁面）

document.hidden是一個布爾值，false表示頁面可見，true表示頁面不可見。

既然知道了可用的屬性，就是時候去監聽事件了，這樣子就可以知道頁面的可見性是什么狀態。這是

利用visibilitychange事件完成的，示例如下：

document.addEventListener("visibilitychange", function(event) {
  if (!document.hidden) {
    // The page is visible.
  } else {
   // The page is hidden.
  }
});

這段代碼是visibilitychange事件的一個簡單應用—檢測當前頁面的狀態。但是你必須知道的是所有屬性和方法都必須帶前綴，因為他們在一些瀏覽器中是帶私有前綴的。下面則是一個跨瀏覽器的案例：

// 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了：
1、你在瀏覽一個導航頁面，并且這個頁面正在從一個RSS源查詢細節，或者定期調用API，如果頁面對用戶不可見的話，
我們可以限制對RSS源或者API的調用。
2、對于常見的手風情效果，當頁面不可見時，可以限制其移動。
3、同樣的方式，只有頁面不可見的時候，才顯示HTML Notification（譯文：http://www.ido321.com/1130.html）給用戶。
我們已經知道代碼怎么去調用Visibility API了，接下來就看一個Demo吧。

Demo1：利用Visibility API改變頁面標題：View Demo

Demo2：當頁面不可見時，怎么從限制查詢從服務器傳送的數據。

在Demo2中，對于來自服務器的刷新信息，我們將怎么限制查詢？不僅是用戶正在瀏覽頁面，并且假設頁面已經引入了JQuery。為了簡單，僅僅以計數說明，但是可以用真實的服務器數據代替。

HTML：

0

JavaScript：

View Demo

如果想知道瀏覽器是否支持Visibility API，我建議去Can I use?去查詢。但是建議用編程的方式去檢測瀏覽器是否支持，可以參考Detect Support for Various HTML5 Features（譯文：

http://www.ido321.com/1116.html)。在主流的現代瀏覽器中已經對這個API有了很好的支持

我說過，有一個包含兩個屬性和一個事件的很不錯的API給我們使用。它可以很容易的整合到你已經存在的應用中，并可以帶來很好的用戶體驗。最后想說的是，當頁面對用戶不可見的時候，我們就可以控制頁面的行為了。

原文首發：http://www.ido321.com/1126.html