摘要：原文譯文的頁(yè)面可視性譯者在早期，瀏覽器并沒有提供選項(xiàng)卡，但是現(xiàn)在基本所有瀏覽器都提供了這個(gè)功能。在這個(gè)中，將基于頁(yè)面的可視性狀態(tài)彈出文檔的標(biāo)題。對(duì)于常見的手風(fēng)情效果，當(dāng)頁(yè)面不可見時(shí)，可以限制其移動(dòng)。

原文：HTML5 Page Visibility API

譯文：HTML 5的頁(yè)面可視性API

譯者：dwqs

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

之前，是不可能確定哪個(gè)選項(xiàng)卡是激活的，哪個(gè)沒有激活，但是在HTML 5 Visibility API的幫助下，就可以檢測(cè)用戶是否在瀏覽某個(gè)網(wǎng)站的頁(yè)面。

在這篇文章中，我們將會(huì)理解如何使用HTML 5 Visibility API，并且用一個(gè)小demo去發(fā)覺頁(yè)面的狀態(tài)。在這個(gè)demo中，將基于頁(yè)面的可視性狀態(tài)彈出文檔的標(biāo)題。

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

document.visibilityState有四個(gè)不同的值：

1、hidden：頁(yè)面在任何屏幕上不可見

2、prerender：頁(yè)面在加載，對(duì)用戶不可見

3、visible：頁(yè)面可見

4、unloaded：頁(yè)面卸載（即用戶將離開當(dāng)前頁(yè)面）

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

既然知道了可用的屬性，就是時(shí)候去監(jiān)聽事件了，這樣子就可以知道頁(yè)面的可見性是什么狀態(tài)。這是

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

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

這段代碼是visibilitychange事件的一個(gè)簡(jiǎn)單應(yīng)用—檢測(cè)當(dāng)前頁(yè)面的狀態(tài)。但是你必須知道的是所有屬性和方法都必須帶前綴，因?yàn)樗麄冊(cè)谝恍g覽器中是帶私有前綴的。下面則是一個(gè)跨瀏覽器的案例：

// 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";
  }
}

現(xiàn)在有了所有瀏覽器帶前綴的屬性和方法，就可以放心應(yīng)用了。對(duì)之前的代碼做出調(diào)整：

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

Demo1：利用Visibility API改變頁(yè)面標(biāo)題：View Demo

Demo2：當(dāng)頁(yè)面不可見時(shí)，怎么從限制查詢從服務(wù)器傳送的數(shù)據(jù)。

在Demo2中，對(duì)于來自服務(wù)器的刷新信息，我們將怎么限制查詢？不僅是用戶正在瀏覽頁(yè)面，并且假設(shè)頁(yè)面已經(jīng)引入了JQuery。為了簡(jiǎn)單，僅僅以計(jì)數(shù)說明，但是可以用真實(shí)的服務(wù)器數(shù)據(jù)代替。

HTML：

0

JavaScript：

View Demo

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

http://www.ido321.com/1116.html)。在主流的現(xiàn)代瀏覽器中已經(jīng)對(duì)這個(gè)API有了很好的支持

我說過，有一個(gè)包含兩個(gè)屬性和一個(gè)事件的很不錯(cuò)的API給我們使用。它可以很容易的整合到你已經(jīng)存在的應(yīng)用中，并可以帶來很好的用戶體驗(yàn)。最后想說的是，當(dāng)頁(yè)面對(duì)用戶不可見的時(shí)候，我們就可以控制頁(yè)面的行為了。

原文首發(fā)：http://www.ido321.com/1126.html