在网页开发中，我们常常需要根据页面当前的显示状态调整业务逻辑，比如当用户切换到其他标签页时暂停视频播放，或者停止不必要的定时数据请求，避免浪费系统资源和网络带宽。JavaScript提供的页面可见性API就是专门用来处理这类需求的工具，它可以准确获取页面当前的可见状态，并且支持监听状态变化事件。
页面可见性API核心属性
页面可见性API主要包含两个核心属性，都挂载在document对象上：
- document.hidden：返回一个布尔值，当页面处于不可见状态时返回
true，可见时返回false。 - document.visibilityState：返回一个字符串，表示页面当前的可见状态，常见取值有：
visible：页面至少部分内容可见，当前标签页处于前台状态。hidden：页面不可见，比如标签页被切换、浏览器窗口被最小化。prerender：页面正在预渲染，用户还不可见。unloaded：页面正在被卸载。
监听标签页状态变化
我们可以通过监听visibilitychange事件来实时捕获页面可见性的变化，当document.hidden或者document.visibilityState的值发生改变时，该事件就会被触发。
基础监听示例
下面是一个简单的监听示例，当页面可见性变化时，在控制台输出当前的状态：
// 监听visibilitychange事件
document.addEventListener('visibilitychange', function() {
// 获取当前页面可见状态
const isHidden = document.hidden;
const visibilityState = document.visibilityState;
console.log('页面是否隐藏：', isHidden);
console.log('当前可见状态：', visibilityState);
if (isHidden) {
console.log('页面已切换到后台，可暂停相关任务');
} else {
console.log('页面回到前台，可恢复相关任务');
}
});
结合业务场景的示例
假设我们有一个定时请求数据的任务，当页面不可见时停止请求，页面恢复可见时重新启动请求，实现如下：
let dataRequestTimer = null;
// 启动定时请求函数
function startDataRequest() {
// 先清除已有的定时器，避免重复创建
if (dataRequestTimer) {
clearInterval(dataRequestTimer);
}
// 每3秒请求一次数据
dataRequestTimer = setInterval(() => {
console.log('正在请求最新数据...');
// 这里可以写实际的数据请求逻辑
}, 3000);
}
// 停止定时请求函数
function stopDataRequest() {
if (dataRequestTimer) {
clearInterval(dataRequestTimer);
dataRequestTimer = null;
console.log('已停止数据请求');
}
}
// 初始化时先启动请求
startDataRequest();
// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
// 页面隐藏时停止请求
stopDataRequest();
} else {
// 页面可见时重新启动请求
startDataRequest();
}
});
兼容性说明
页面可见性API在现代浏览器中都有较好的支持，包括Chrome、Firefox、Edge、Safari等主流浏览器。如果需要兼容非常老的浏览器版本，可以先做特性检测，再决定是否需要降级处理：
// 检测浏览器是否支持页面可见性API
if (typeof document.hidden !== 'undefined') {
console.log('当前浏览器支持页面可见性API');
// 可以正常使用相关属性和事件
} else {
console.log('当前浏览器不支持页面可见性API');
// 可写降级逻辑，比如用window的blur、focus事件替代
window.addEventListener('blur', function() {
console.log('窗口失去焦点，可视为页面隐藏');
});
window.addEventListener('focus', function() {
console.log('窗口获得焦点，可视为页面可见');
});
}
常见应用场景
- 视频、音频播放控制：页面隐藏时暂停播放，页面恢复时继续播放。
- 定时任务管理：页面隐藏时停止不必要的定时请求、动画渲染，减少资源消耗。
- 数据统计：统计用户在页面的实际停留时长，排除页面在后台的时间。
- 游戏类应用：页面切换到后台时暂停游戏逻辑，避免用户不在前台时游戏继续运行。
注意：document.hidden和visibilitychange事件都是针对整个页面的状态，而不是页面内某个元素的可见状态，不要和元素的显示隐藏逻辑混淆。
JavaScript页面可见性标签页状态监听visibilitychange修改时间：2026-06-13 14:09:23