js判断当前页面是否显示

在JavaScript中，判断当前页面是否显示可以通过监听页面的可见性状态来实现。这通常使用document.visibilityState属性和visibilitychange事件来完成。

基本概念

• document.visibilityState: 这是一个只读属性，表示文档的可见性状态。它有三个可能的值：
  • 'visible': 页面内容至少部分可见。换句话说，页面处于前台标签页中，并且窗口没有最小化。
  • 'hidden': 页面内容对用户不可见。这可能是因为页面处于后台标签页中，或者窗口被最小化。
  • 'prerender': 页面正在被预渲染，这是浏览器为了加快页面加载速度而做的一种优化，但这个状态很少用到。
• visibilitychange事件: 当文档的可见性状态发生变化时，会触发这个事件。

应用场景

• 节省资源: 当页面不可见时，可以暂停一些资源密集型的任务，比如动画、视频播放或者定时更新数据，以节省CPU和电池消耗。
• 统计分析: 可以用来统计用户在页面上的活跃时间，或者用户在页面不可见时离开的情况。

示例代码

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    console.log('页面现在是可见的');
    // 可以在这里恢复之前暂停的任务
  } else if (document.visibilityState === 'hidden') {
    console.log('页面现在是隐藏的');
    // 可以在这里暂停一些任务
  }
});

// 立即检查当前页面的可见性状态
if (document.visibilityState === 'visible') {
  console.log('页面加载时是可见的');
} else {
  console.log('页面加载时是隐藏的');
}

注意事项

• 不同浏览器对visibilityState的支持可能有所不同，但大多数现代浏览器都已经支持。
• visibilitychange事件可能会因为多种原因触发，比如用户切换标签页、最小化浏览器窗口等。

通过上述方法，你可以有效地判断当前页面是否对用户可见，并据此做出相应的处理。