页面的隐藏或显示：hidden与visibilityState

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

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

有两种方法：

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 = '(*´∇｀*) 被你发现啦~ '
}
});

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