前言
在工作中我们可能会遇到这样的需求, 当浏览器切换到别的标签页或着最小化时, 我们需要暂停页面上正在播放的视频或者音乐, 这个需求就会用到我下面要说的这个知识点:
- 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 则反之;
来源: https://blog.csdn.net/wxl1555/article/details/79717680