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

巴特西

h5 Visibility API总结

最新文章

热门文章