有趣的API：Page Visibility API 頁面可見性

今天在知乎上看到一篇文章，說到了用window.blur 和 window.focus事件來動態改變網頁的title, Page Visibility這麼強大的功能只能懷才不遇

Page Visibility API

在使用瀏覽器的時，用戶經常是打開多個網頁，當一個網頁是可見或點擊選中的狀態時 Page Visibility API 能夠讓你獲取到這種狀態。Page Visibility作的事情很簡單，就是判斷頁面是否課件。

Page Visibility 全部屬性

兩個屬性，一個方法

document.hidden(只讀)
返回一個布爾值，顯示當前頁面是否不可見。

document.visibilityState (只讀)
是一個用來展現文檔可見性狀態的字符串。可能的值：

• visible : 頁面內容至少是部分可見。 在實際中，這意味着頁面是非最小化窗口的前景選項卡。

• hidden : 頁面內容對用戶不可見。 在實際中，這意味着文檔能夠是一個後臺標籤，或是最小化窗口的一部分，或是在操做系統鎖屏激活的狀態下。

• prerender : 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當作隱藏). 文檔可能初始狀態爲prerender，但毫不會從其它值轉爲該值。 註釋：瀏覽器支持是可選的。

• unloaded : 頁面正在從內存中卸載。 註釋：瀏覽器支持是可選的

visibilitychange 頁面狀態切換時的事件。

和focus、blur事件的一些區別。

• focus、blur會在點擊地址欄，書籤時觸發。Visibility不會觸發
  

• 多窗口模式下，Visibility不會觸發。
  

• 頁面直接最小化，focus、blur和Visibility正常觸發。
  

牢記定義： 文檔是一個後臺標籤，或是最小化窗口的一部分，或是在操做系統鎖屏激活的狀態下。

應用場景

• 使用 Visibility能夠節省資源，當頁面不可見的時候，就能夠讓頁面休息休息了，一些動畫也能夠暫停，或者播放的視頻暫停，很是貼心。

• 或者一個打開一個站點多個頁面，在其中一個頁面登陸，切換到其它頁面的時候就能夠自動登陸。

兼容性

通過了幾年的發展，如今Page Visibility API 的兼容性已經很是良好，能夠放心使用。

參考資料

張鑫旭博客Page Visibility(頁面可見性) API介紹、微拓展

MDN Page_Visibility_API