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

posted @   全玉  阅读(861)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示