js基础–如何判断浏览器标签页是隐藏或者显示状态

30次阅读

共计 697 个字符,预计需要花费 2 分钟才能阅读完成。

欢迎访问我的个人博客: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

正文完
 0