資訊專欄INFORMATION COLUMN
摘要：所有屬性兩個屬性，一個方法只讀返回一個布爾值，顯示當(dāng)前頁面是否不可見?？赡艿闹淀撁鎯?nèi)容至少是部分可見。在實際中，這意味著頁面是非最小化窗口的前景選項卡。注釋瀏覽器支持是可選的頁面狀態(tài)切換時的事件。參考資料張鑫旭博客頁面可見性介紹微拓展
今天在知乎上看到一篇文章，說到了用window.blur 和 window.focus事件來動態(tài)改變網(wǎng)頁的title, Page Visibility這么強大的功能只能懷才不遇
Page Visibility API在使用瀏覽器的時，用戶常常是打開多個網(wǎng)頁，當(dāng)一個網(wǎng)頁是可見或點擊選中的狀態(tài)時 Page Visibility API 可以讓你獲取到這種狀態(tài)。Page Visibility做的事情很簡單，就是判斷頁面是否課件。
Page Visibility 所有屬性兩個屬性，一個方法
document.hidden(只讀)
返回一個布爾值，顯示當(dāng)前頁面是否不可見。
document.visibilityState (只讀)
是一個用來展示文檔可見性狀態(tài)的字符串?？赡艿闹担?/p>
visible : 頁面內(nèi)容至少是部分可見。 在實際中，這意味著頁面是非最小化窗口的前景選項卡。
hidden : 頁面內(nèi)容對用戶不可見。 在實際中，這意味著文檔可以是一個后臺標簽，或是最小化窗口的一部分，或是在操作系統(tǒng)鎖屏激活的狀態(tài)下。
prerender : 頁面內(nèi)容正在被預(yù)渲染且對用戶是不可見的(被document.hidden當(dāng)做隱藏). 文檔可能初始狀態(tài)為prerender，但絕不會從其它值轉(zhuǎn)為該值。 注釋：瀏覽器支持是可選的。
unloaded : 頁面正在從內(nèi)存中卸載。 注釋：瀏覽器支持是可選的
visibilitychange 頁面狀態(tài)切換時的事件。
和focus、blur事件的一些區(qū)別。focus、blur會在點擊地址欄，書簽時觸發(fā)。Visibility不會觸發(fā)
多窗口模式下，Visibility不會觸發(fā)。
頁面直接最小化，focus、blur和Visibility正常觸發(fā)。
牢記定義： 文檔是一個后臺標簽，或是最小化窗口的一部分，或是在操作系統(tǒng)鎖屏激活的狀態(tài)下。
應(yīng)用場景使用 Visibility可以節(jié)省資源，當(dāng)頁面不可見的時候，就可以讓頁面休息休息了，一些動畫也可以暫停，或者播放的視頻暫停，非常貼心。
或者一個打開一個站點多個頁面，在其中一個頁面登錄，切換到其它頁面的時候就可以自動登錄。
兼容性經(jīng)過了幾年的發(fā)展，現(xiàn)在Page Visibility API 的兼容性已經(jīng)非常良好，可以放心使用。
張鑫旭博客Page Visibility(頁面可見性) API介紹、微拓展
MDN Page_Visibility_API
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82879.html
摘要：原文譯文的頁面可視性譯者在早期，瀏覽器并沒有提供選項卡，但是現(xiàn)在基本所有瀏覽器都提供了這個功能。在這個中，將基于頁面的可視性狀態(tài)彈出文檔的標題。對于常見的手風(fēng)情效果，當(dāng)頁面不可見時，可以限制其移動。 原文：HTML5 Page Visibility API 譯文：HTML 5的頁面可視性API 譯者：dwqs showImg(https://segmentfault.com/im...
一、簡介 要知道用戶何時離開，有常用的方法是監(jiān)聽下面三個事件?！ agehide beforeunload unload 可上述三種方法有一個bug就是，這些事件在手機上可能不會觸發(fā)，頁面就直接關(guān)閉了。因為手機系統(tǒng)可以將一個進程直接轉(zhuǎn)入后臺，然后殺死?！ ∮脩酎c擊了一條系統(tǒng)通知，切換到另一個 App?！ ∮脩暨M入任務(wù)切換窗口，切換到另一個 App?！ ∮脩酎c擊了 Home 按鈕，切換...
閱讀 1424·2023-04-25 23:42
閱讀 3132·2021-11-19 09:40
閱讀 3620·2021-10-19 11:44
閱讀 3825·2021-10-14 09:42
閱讀 2030·2021-10-13 09:39
閱讀 3956·2021-09-22 15:43
閱讀 743·2019-08-30 15:54
閱讀 1527·2019-08-26 13:32
