h5 Visibility API总结

最近活动中的小游戏，有涉及页面隐藏或app后台运行时候，暂停游戏的功能，使用了h5的Visibility API，在此总结如下：

两个属性

document.hidden (Read only)

如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。

document.visibilityState (Read only)

是一个用来展示文档可见性状态的字符串。可能的值：

visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。
hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。
unloaded : 页面正在从内存中卸载。 注释：浏览器支持是可选的。

一个事件

document.addEventListener("visibilitychange", handleVisibilityChange, false);

function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

在主流浏览器和mobile浏览器上都有不错的兼容性

示例代码：

//获取带前缀的事件
// Get Browser-Specifc Prefix
function getBrowserPrefix() {
  if ('hidden' in document) {
    return null;
  }
  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];
    }
  }

  return null;
}
 
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + 'Hidden';
  } else {
    return 'hidden';
  }
}
 
function visibilityState(prefix) {
  if (prefix) {
    return prefix + 'VisibilityState';
  } else {
    return 'visibilityState';
  }
}
 
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + 'visibilitychange';
  } else {
    return 'visibilitychange';
  }
}

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();

 

参考：https://code.tutsplus.com/articles/html5-page-visibility-api--cms-22021
　　    https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API