Page Visibility API（页面是否可见）

最新推荐文章于 2025-06-08 09:02:07 发布

liu__software

最新推荐文章于 2025-06-08 09:02:07 发布

阅读量362

点赞数

分类专栏： javascript

javascript 专栏收录该内容

148 篇文章

订阅专栏

本文介绍了PageVisibilityAPI的基本概念及其组成部分，包括如何判断页面是否隐藏、页面的可见状态及如何监听可见性的变化。此外还提供了兼容不同浏览器的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候不知道用户是不是正在和页面交互,是困扰web开发人员的一大问题,尤其是界面用动画或者是其它一些一直占用资源的效果时。如果页面最小化或者是隐藏在其它标签页面后(即当前不是可见的),那么有些功能可以停下来,这样更节约资源。
Page Visibility API就是为了让开发人员知道页面是否对用户可见而推出来的。
Page Visibility API本身比较简单,由以下三个部分组成。
1、document.hidden:表示页面是否隐藏;true表示隐藏,false表示没有隐藏。页面隐藏包括页面在后台标签页或者浏览器最小化
2、document.visibilityState:表示下列4个可能状态的值。
a.页面在后台标签页中或者浏览器最小化 “hidden”
b.页面在前台标签页中 “visible”
c.实际的页面已经隐藏,但用户可以看到页面的预览 “prerender”
d.页面在屏幕外执行预渲染处理 “preview”
3、visibilitychange事件:当文档从可见变为不可见或者不可见变为可见时,触发该事件。
chrome需要加上webkit前缀,即document.webkitHidden,IE中需要加上ms前缀,即document.msHidden,在firefox中需要加上moz前缀,即document.mozHidden.
检查浏览器是否支持Page Visibility API的方法

console.log(typeof document.hidden)//boolean表示是支持的,undefined表示不支持。目前,IE11,Chrome(46.0.2490.86 m)
,firefox(45)版本已经能支持document.hidden。

兼容代码如下:

var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
}
// 添加监听器，在title里显示状态变化
document.addEventListener(visibilityChange, function() {
    console.log(document[hidden] + " || " +document[state]);
}, false);

可以在页面隐藏或者页面显示时,添加对应的处理程序。
个人觉得这个API虽然简单,但是非常有用处。

转载于：https://blog.youkuaiyun.com/liuyan19891230/article/details/51261635