HTML5“新的”API：Page Visibility

点击到源博客

1.用途

通过visibilityState的值检测页面当前是否可见，以及打开网页的时间等；

1
2
//当页面是打开的时候visibilitySatte的值是：visible
//当tab切面被切换或者浏览器窗口被最小化的时候，visibitySatte的值是hidden

在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

2.使用

支持Page VIsibility的浏览器在document上会添加hidden和visibilityState两个属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getHiddenProp() {
          return 'hidden' in document ? 'hidden' : function() {
            var r = null;
            ['webkit', 'moz', 'ms', 'o'].forEach(function(prefix) {
              if((prefix + 'Hidden') in document) {
                return r = prefix + 'Hidden';
              }
            });
            return r;
          }();
      }
      var l = getHiddenProp(),
          k = l.slice(0, -6)
      console.log(l)
      document.addEventListener(k+'visibilitychange', function onVisibilityChange(e) {
	    //do some thing...
      console.log(document[l]) //获取当前页面hidden的值：true/false
      console.log(document.visibilityState) //获取当前页面visibilityState的值
    });