首页 > 代码库 > 杂谈：HTML 5页面可视性API

杂谈：HTML 5页面可视性API

2024-09-16 16:23:06   218人阅读

译文来源：http://www.ido321.com/1126.html

原文：HTML5 Page Visibility API

译文：HTML 5的页面可视性API

译者：dwqs

 技术分享

在早期。浏览器并没有提供选项卡，可是如今基本全部浏览器都提供了这个功能。

作为一个程序猿，我通常会同一时候打开10到15个选项卡，甚至有些时候会在25到30.

为什么介绍Page Visibility API呢？

之前，是不可能确定哪个选项卡是激活的，哪个没有激活。可是在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.
  }
});

 哪些地方须要用到Visibility API呢？

         在下列情况中。就能够考虑使用API了：
                 1、你在浏览一个导航页面。而且这个页面正在从一个RSS源查询细节，或者定期调用API，假设页面对用户不可见的话。
我们能够限制对RSS源或者API的调用。
                 2、对于常见的手风情效果。当页面不可见时，能够限制其移动。
                 3、相同的方式，仅仅有页面不可见的时候。才显示HTML Notification（译文：http://www.ido321.com/1130.html）给用户。
        我们已经知道代码怎么去调用Visibility API了，接下来就看一个Demo吧。

Demo

       Demo1：利用Visibility API改变页面标题：View Demo
       Demo2：当页面不可见时，怎么从限制查询从server传送的数据。
       在Demo2中，对于来自server的刷新信息，我们将怎么限制查询？不仅是用户正在浏览页面。而且如果页面已经引入
了JQuery。为了简单，只以计数说明，可是能够用真实的server数据取代。

    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>

 

View Demo

浏览器支持

假设想知道浏览器是否支持Visibility API，我建议去Can I use?去查询。可是建议用编程的方式去检測浏览器是否支持。能够參考Detect Support for Various HTML5 Features（译文：

http://www.ido321.com/1116.html)。在主流的现代浏览器中已经对这个API有了非常好的支持

 

总结

我说过，有一个包括两个属性和一个事件的非常不错的API给我们使用。它能够非常easy的整合到你已经存在的应用中。并能够带来非常好的用户体验。最后想说的是，当页面对用户不可见的时候，我们就能够控制页面的行为了。

下一篇：杂谈：HTML 5的消息通知机制

杂谈：HTML 5页面可视性API


联系
我们