使用html5 visibility api检测页面活动状态

几年前，我们浏览网页的时候是没有选项卡浏览模式的，每一个网页都会是一个浏览器窗口，如果我没有记错，Win7之前我们都是这样浏览网页的。作为一个程序员，我们经常会同时打开10-15个网页，多的时候超过20个也不足为奇。

为什么要使用这个API?

早期我们没有办法确定哪些选项卡是活动状态的，但是现在通过HTML Visibility API，我们可以检测访客是否正在浏览我们的界面。

在这个教程中我们会介绍如何使用HTML5 Visibility API，同时我们也为你准备了一个简单的demo来查看页面的状态。在demo中，我们将会根据页面的状态来修改文档的标题。

查看页面的状态

随着这个API的出现，我们又迎来了两个新的document属性，他们分别是document.visibilityState和document.hidden。

document.visibilityState 有四个可选值：

• hidden: 页面在任何屏幕上都没有被浏览。
• prerender: 页面在选项卡中，但访客现在没有在这个选项卡上。
• visible: 访客正在浏览。
• unloaded: 页面已经被加载过了，现在跳转在其它界面上了。

document.hidden是一个布尔类型的属性。

现在我们可以根据页面状态来控制我们的网站了。

现在我们可以马上知道我们页面的availability属性了。但是首先我们要做的是监听这个事件，这样一来我们就可以做出相应的事情。我已经写好了一个简单的监听事件：

 
 

  
  

   
   
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比较适用的地方：

1. 当页面属性是hidden的时候，我们可以禁止调用RSS API。
2. 当页面状态是隐藏的时候，我们可以禁止运动的物体继续运动。
3. 我们可以在页面状态是隐藏的时候在标题上显示一些通知。

我只是大概举了几个例子，有更好主意的可以在评论中告诉大家。下面我们使用这个API写一些实例。

例子

• Demo 1: 这个例子在页面状态是隐藏的时候改变标题栏内容。查看 Demo
• Demo 2: 这个例子演示在页面状态是隐藏的时候，计数量停止计数，可见后继续计数。

这Demo 2中，我们会详细向你介绍它的实现原理：

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>
    
    
    
    

     
     
     
     

      
      

       
       

       
       

      
      
     
     
     
     
    
    
   
   

查看Demo

浏览器支持

如果你想让所有的浏览器都支持这个API，我建议你看一下这篇文章。如果想检测当前浏览器是否运行这个API，可以看一看Detect Support for Various HTML5 Features.。到目前为止，我们已经可以很好的在各个浏览器中使用这个功能。