js判断当前页面是否活动页面

页面是否活动页面"/>

js判断当前页面是否活动页面

在开发中，希望当前页面如果不是活动页面，即用户切换了tab页，或者用户把浏览器缩小隐藏了

这个时候，我们希望页面暂停，比如游戏暂停，视频停止播放等。

那怎么做呢?

1、使用document.hidden来判定是否隐藏

var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {hidden = "hidden";visibilityChange = "visibilitychange";state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {hidden = "mozHidden";visibilityChange = "mozvisibilitychange";state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {hidden = "msHidden";visibilityChange = "msvisibilitychange";state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {hidden = "webkitHidden";visibilityChange = "webkitvisibilitychange";state = "webkitVisibilityState";
}// 添加监听器,监听当前是否活动页面
document.addEventListener(visibilityChange, function() {document.title = document[state];
}, false);

2、使用requestAnimationFrame，如果当前不是活动页面，则requestAnimationFrame不会回调。setInterval会一直走

setInterval(()=>{console.log(111);(window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame)(function(){console.log(2);});})