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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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工具