一、JS 监听浏览器各个标签间的切换
以前看到过一些网页，在标签切换到其它地址时，网页上的标题上会发生变化，一直不知道这个是怎么做的，最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定，这里将介绍一下页面可见性（Page Visibility）API的简单应用。
简单的说，当用户最小化网页或移动到另一个标签时，API会发送 visibilitychange 有关该网页的可见性的事件。你可以检测到该事件并执行一些操作或行为。例如：标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
二、document的可见性属性
Page Visibility (Second Edition) 中定义了2个只读的 document 属性：hidden 和 visibilityState。
其中 document.hidden 是一个布尔值，简单的表示标签页显示或者隐藏。而 document.visibilityState 属性更为详细，目前有四个可能的值：
visible : 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。
hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。
prerender : 网页内容被预渲染并且用户不可见。
unloaded : 如果文档被卸载，那么这个值将被返回。
一般情况下我们使用 document.hidden 就能满足通常的需求。
为了支持老版本的浏览器，我们需要对 document.hidden 在做一些前缀处理：
三、示例：监听标签，控制视频播放与暂停
<video id="videoElement" controls loop> <source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4"> <source src="https://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg"> </video> // 设置隐藏属性和改变可见属性的事件的名称 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } // 添加监听器 document.addEventListener(visibilityChange, function () { console.log("当前页面是否被隐藏：" + document[hidden]); }, false); console.log(hidden, visibilityChange) var videoElement = document.getElementById("videoElement"); // 如果页面是隐藏状态，则暂停视频 // 如果页面是展示状态，则播放视频 function handleVisibilityChange() { if (document[hidden]) { videoElement.pause(); } else { videoElement.play(); } } // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告 if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { console.log( "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API." ); } else { // 处理页面可见属性的改变 document.addEventListener(visibilityChange, handleVisibilityChange, false); // 当视频暂停，设置title // This shows the paused videoElement.addEventListener("pause", function () { document.title = 'Paused'; }, false); // 当视频播放，设置title videoElement.addEventListener("play", function () { document.title = 'Playing'; }, false); }
