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

2019-2-27    分类: 前端资源

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

直接上代码:

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);
}