頁面的隱藏或顯示：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 = '(*´∇｀*) 被你發現啦~ '
}
});

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