js判断用户是否停留在当前页面

使用情景：我发现视频网站只有当我们切换到当前的页面时，广告才播放；如果偷偷切换到其他页面了广告就暂停了，必须要重新切换回来广告才会重新播放。

直接上代码：

var a=0;

document.addEventListener("visibilitychange", function() {
  ++a;
  document.title=a;
  //document.title=document.hidden; //如果页面隐藏值true ,用户在当前页值为false
  //document.title=document.visibilityState; //显示visible 隐藏hide
}, false);

效果：

当我们停留在当前页是不会触发的，只要我们切换到其他页面就会触发：

在当我们切回来时候，也会触发一次，更新状态

兼容性写法：

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") {    //ie10
   hidden = "msHidden";
   visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {  //谷歌
   hidden = "webkitHidden";
   visibilityChange = "webkitvisibilitychange";
}

// 添加监听器
document.addEventListener(visibilityChange, function() {
   console.log("当前页面是否被隐藏：" + document[hidden]);
}, false);

（注意：这个方法有一个bug，如果把页面独立出来不看页面函数也不会触发）

推荐：

用焦点和失去焦点 的方法，监听整个window

var count = 1;
var interval_output = null;

function output_number() {
   count++;
   document.title=count;
}


// window 失去焦点，停止输出
window.onblur = function() {
   clearInterval(interval_output);
};


// window 每次获得焦点
window.onfocus = function() {
// 每 1 秒在页面输出一个数
  interval_output = setInterval(function() {
      output_number();
  }, 1000);
}