我们在很多地方都需要判断用户是不是在当前页面,如果离开了当前页面我们需要捕捉到并进行一些操作.

例如:当视频处于播放状态时,我们需要判断用户是不是在当前页面以继续播放,如果离开了我们需要暂停播放。

有两种方法:

  1. document.hidden
  2. document.visibilityState

visibilitychange 

选项卡可见或隐藏的时候将触发visibilitychange事件

document.hidden

这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false。

这里我们用选型卡隐藏或显示来改变title当例子

document.addEventListener('visibilitychange', function() {
         if (document.hidden) {
             document.title = '(つェ⊂)我藏好了哦~ ';
         }
         else {
             document.title = '(*´∇`*) 被你发现啦~ '
         }
     });

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab,而且窗口不是最小化状态),要么是hidden (页面不是当前激活tab页面,或者窗口最小化了。),或者prerender (页面在重新生成,对用户不可见。)

document.addEventListener('visibilitychange', function () {
    if (document.visibilityState == 'hidden') {
         document.title = '(つェ⊂)我藏好了哦~ ';
    } else {
        document.title = '(*´∇`*) 被你发现啦~ '
}
});

到这就结束了这篇文章,很有意思的小功能