前提：之前在浏览网页的时候发现了这个API，发现很有趣所以去百度了一下给大家分享这个离开当浏览器切换后标题改变的程序代码，主要是利用visibilitychange  事件判断页面可见性，来达到切换浏览器的时候改变网站的标题。但是目前并且不是每一款浏览器都有所支持，具体是哪一个我还没有测试过，不过我测试了谷歌和火狐都是可以的。大家只用复制下面代码片段到网站的<script type="text/javascript" language="javascript"></script>里面就行，可以根据自己喜欢更改document.title的内容。不过下面我还是会简单的介绍一下visibilitychange API的使用场景和属性。

document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden'){
  normal_title=document.title;
  document.title='瞅啥去啦？';
}else{
  document.title=normal_title;
}
});	

定义：

    这是一个页面可见性的API，就是在浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

在我们使用电脑或者平板浏览器浏览网页的时候，任何给定的网页都有可能出现在后台，这对用户体验感不佳，所以对用户不可见。Page Visibility API提供了一些事件，让你可以通过监视这些事件来了解文档何时变为可见或隐藏的状态，以及查看页面当前可见性状态的功能。并且页面可见性API通过使页面避免看不见文档时执行不必要的任务，对于节省资源和提高性能特别有用。

触发机制：

    当用户操作窗口最小化或切换到另一个网页选项卡时，API就会发送一个visibilitychange事件，用来通知侦听器页面的状态已改变。这样程序猿就能利用状态的变化检测到该事件并执行某些操作。例如下面这个场景，当你正在使用浏览器播放视频，然后你打开并进入到另一个网页选项卡内，这个时候就会在你切换网页选项卡过后暂停视频播放，在你返回这个网页的时候恢复视频播放。这样就不会在视频中丢失自己的观看进度，视频的配乐不会干扰新的“前景”选项卡中的音频，同时用户也不会错过任何视频。这个过程在操作的时候是无感的，所以对用户的体验感是很好的，并且减少了服务器的压力和宽带的占用。

该API的常用场景：

1.网站上有一个轮播图，除非用户正在查看页面，否则该图像不会滑到下一张幻灯片

2.显示信息仪表板的应用程序不想在页面不可见时轮询服务器以获取更新

3.页面要检测何时将其呈现，以便可以准确计数页面浏览量

4.网站希望在设备处于待机模式时关闭声音（用户按电源按钮以关闭屏幕）

优势：

    该API的优势也正是它所呈现的，简单来说就是检测页面是否隐藏。

    虽然你可以通过onblur或者onfocus告知用户是否切换窗口，但这并不代表页面就是隐藏的。只有当用户切换选项卡或最小化包含选项卡的浏览器窗口时，页面才会隐藏。页面可见性API解决了这个问题。

视频案例：

    程序猿可以利用下面代码片段实现：切换网页选项卡的时候暂停视频，返回的时候继续播放。

// 为可见性设置隐藏属性和更改事件的名称
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10和Firefox 18及更高版本支持 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// 如果页面被隐藏，暂停视频；
// 如果显示页面，播放视频
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// 如果浏览器不支持addEventListener或页面可见性API，则发出警告
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("这个演示需要一个支持页面可见性API的浏览器，比如Google Chrome或Firefox.");
} else {
  // 处理页可见性更改事件
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
  // 当视频暂停时，设置标题。
  // 这里是显示暂停的
  videoElement.addEventListener("pause", function(){
    document.title = 'Paused';
  }, false);
    
  // 播放视频时，设置标题。
  videoElement.addEventListener("play", function(){
    document.title = 'Playing'; 
  }, false);

}

API属性：

注意：因为页面可见性API的属性都是在document里面，所以使用的时候都需要使用document取得属性值。

Document.hidden  只读

返回true页面是否处于被用户隐藏的状态，false否则返回。

Document.visibilityState 只读

一个DOMString表示文档的当前可见性状态。可能的值为：

visible

页面内容可以至少部分可见。实际上，这意味着页面是未最小化窗口的前景选项卡。

hidden

由于文档的选项卡在后台或最小化的窗口的一部分，或者由于设备的屏幕关闭，用户看不到页面的内容。

prerender

该页面的内容正在被渲染，并且对用户不可见。文档可能以该prerender状态开始，但是永远不会从任何其他状态切换到该状态，因为文档只能预渲染一次。

注意：并非所有浏览器都支持预渲染。

unloaded

该页面正在从内存中卸载。

注意：并非所有浏览器都支持该unloaded值。

以上就是关于visibilitychange页面可见性API的简介了，如果大家感兴趣的话可以多多百度，每个人都有自己不同的理解，希望这篇文章能够帮到你学习，喜欢这篇文章的话也可以关注本站点，吃饭用大碗的程序猿会每天定时更新不同分类下的文章，乐于分享IT技术知识。