JavaScript监听页面可见性（焦点）同时改变title的三种方法

本文参考了developer.mozilla.org/zh-CN/docs/…

onfocus onblur

window.onfocus = function() { 
  console.log("onfocus");
  document.title="在这";
};
window.onblur=function(){
  console.log("onblur");
  document.title="离开了";
}

通过改变标签页 title 可清楚看到变化
下面是html5提供的方法 visibilitychange 事件 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。经测试（Chorme），浏览器最小化也会触发该事件。可以用addEventListener()向document添加监听事件,也可以直接写成document.onvisibilitychange = function() {…}

document.hidden

如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。

使用addEventListener向document添加监听事件，false是addEventListener默认的一个参数，可以不写

function handleVisibilityChange() {
if (document.hidden) {
	document.title="离开了";
} else  {
 	document.title="在这";
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);

document.visibilityState

是一个用来展示文档可见性状态的字符串。可能的值：

visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。
hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。

function handleVisibilityChange(){
  if(document.visibilityState=="hidden"){
    document.title="离开了";
  }
  if(document.visibilityState=="visible"){
    document.title="在这";
  }
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);

下面是MDN的demo，离开界面，视频暂停

含有兼容代码，值得一看

// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  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 或 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);
  
}

来自：blog.csdn.net/weixin_4558…