js基础--如何判断浏览器标签页是隐藏或者显示状态_javascript 移动端判断浏览器隐藏-CSDN博客

本文介绍了如何利用`document.visibilityState`和`document.hidden`属性以及`visibilitychange`事件，监控浏览器标签页的显示和隐藏状态，以便在切换时暂停视频或音乐。适合理解和应用到网页开发中。

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

欢迎访问我的个人博客：http://www.xiaolongwu.cn

前言
在工作中我们可能会遇到这样的需求，当浏览器切换到别的标签页或着最小化时，我们需要暂停页面上正在播放的视频或者音乐，这个需求就会用到我下面要说的这个知识点：

document.visibilityState
document.hidden
visibilitychange
具体用法
浏览器标签页隐藏或者显示时会改变document.visibilityState和document.hidden的值，我们可以通过visibilitychange这个事件去监听他们状态值的变化；

// 我在这里建议大家亲自试试以下代码

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
  console.log(document.hidden);
});

上面代码中：

document.visibilityState有两个值，分别为hidden和visible,hidden表示标签页被隐藏了，visible则反之。

document.hidden也有两个值，分别为true和false，true表示标签页被隐藏了，false则反之。

我的github资源地址：js基础–如何判断浏览器标签页是隐藏或者显示状态

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

原文地址