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

最新推荐文章于 2024-09-14 06:00:00 发布

程序me

最新推荐文章于 2024-09-14 06:00:00 发布

阅读量4.9k

点赞数 2

分类专栏： js 文章标签： requestAnimationFrame document.hidden

本文链接：https://blog.csdn.net/lqyygyss/article/details/90488912

版权

js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在开发中，希望当前页面如果不是活动页面，即用户切换了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);
    });

})