一、簡(jiǎn)介

有時(shí)候，開(kāi)發(fā)者需要知道，用戶正在離開(kāi)頁(yè)面。常用的方法是監(jiān)聽(tīng)下面三個(gè)事件。

pagehide

beforeunload

unload

但是，這些事件在手機(jī)上可能不會(huì)觸發(fā)，頁(yè)面就直接關(guān)閉了。因?yàn)槭謾C(jī)系統(tǒng)可以將一個(gè)進(jìn)程直接轉(zhuǎn)入后臺(tái)，然后殺死。

• 用戶點(diǎn)擊了一條系統(tǒng)通知，切換到另一個(gè) App。
• 用戶進(jìn)入任務(wù)切換窗口，切換到另一個(gè) App。
• 用戶點(diǎn)擊了 Home 按鈕，切換回主屏幕。
• 操作系統(tǒng)自動(dòng)切換到另一個(gè) App（比如，收到一個(gè)電話）。

上面這些情況，都會(huì)導(dǎo)致手機(jī)將瀏覽器進(jìn)程切換到后臺(tái)，然后為了節(jié)省資源，可能就會(huì)殺死瀏覽器進(jìn)程。

以前，頁(yè)面被系統(tǒng)切換，以及系統(tǒng)清除瀏覽器進(jìn)程，是無(wú)法監(jiān)聽(tīng)到的。開(kāi)發(fā)者想要指定，任何一種頁(yè)面卸載情況下都會(huì)執(zhí)行的代碼，也是無(wú)法做到的。為了解決這個(gè)問(wèn)題，就誕生了 Page Visibility API。不管手機(jī)或桌面電腦，所有情況下，這個(gè) API 都會(huì)監(jiān)聽(tīng)到頁(yè)面的可見(jiàn)性發(fā)生變化。

這個(gè)新的 API 的意義在于，通過(guò)監(jiān)聽(tīng)網(wǎng)頁(yè)的可見(jiàn)性，可以預(yù)判網(wǎng)頁(yè)的卸載，還可以用來(lái)節(jié)省資源，減緩電能的消耗。比如，一旦用戶不看網(wǎng)頁(yè)，下面這些網(wǎng)頁(yè)行為都是可以暫停的。

• 對(duì)服務(wù)器的輪詢
• 網(wǎng)頁(yè)動(dòng)畫(huà)
• 正在播放的音頻或視頻

二、document.visibilityState

這個(gè) API 主要在document對(duì)象上，新增了一個(gè)document.visibilityState屬性。該屬性返回一個(gè)字符串，表示頁(yè)面當(dāng)前的可見(jiàn)性狀態(tài)，共有三個(gè)可能的值。

hidden：頁(yè)面徹底不可見(jiàn)。

visible：頁(yè)面至少一部分可見(jiàn)。

prerender：頁(yè)面即將或正在渲染，處于不可見(jiàn)狀態(tài)。

其中，hidden狀態(tài)和visible狀態(tài)是所有瀏覽器都必須支持的。prerender狀態(tài)只在支持"預(yù)渲染"的瀏覽器上才會(huì)出現(xiàn)，比如 Chrome 瀏覽器就有預(yù)渲染功能，可以在用戶不可見(jiàn)的狀態(tài)下，預(yù)先把頁(yè)面渲染出來(lái)，等到用戶要瀏覽的時(shí)候，直接展示渲染好的網(wǎng)頁(yè)。

只要頁(yè)面可見(jiàn)，哪怕只露出一個(gè)角，document.visibilityState屬性就返回visible。只有以下四種情況，才會(huì)返回hidden。

• 瀏覽器最小化。
• 瀏覽器沒(méi)有最小化，但是當(dāng)前頁(yè)面切換成了背景頁(yè)。
• 瀏覽器將要卸載（unload）頁(yè)面。
• 操作系統(tǒng)觸發(fā)鎖屏屏幕。

可以看到，上面四種場(chǎng)景涵蓋了頁(yè)面可能被卸載的所有情況。也就是說(shuō)，頁(yè)面卸載之前，document.visibilityState屬性一定會(huì)變成hidden。

事實(shí)上，這也是設(shè)計(jì)這個(gè) API 的主要目的。

另外，早期版本的 API，這個(gè)屬性還有第四個(gè)值unloaded，表示頁(yè)面即將卸載，現(xiàn)在已經(jīng)被廢棄了。

注意，document.visibilityState屬性只針對(duì)頂層窗口，內(nèi)嵌的<iframe>頁(yè)面的document.visibilityState屬性由頂層窗口決定。

使用 CSS 屬性隱藏<iframe>頁(yè)面（比如display: none;），并不會(huì)影響內(nèi)嵌頁(yè)面的可見(jiàn)性。

三、document.hidden

由于歷史原因，這個(gè) API 還定義了document.hidden屬性。該屬性只讀，返回一個(gè)布爾值，表示當(dāng)前頁(yè)面是否可見(jiàn)。

當(dāng)document.visibilityState屬性返回visible時(shí)，document.hidden屬性返回false；其他情況下，都返回true。

該屬性只是出于歷史原因而保留的，只要有可能，都應(yīng)該使用document.visibilityState屬性，而不是使用這個(gè)屬性。

四、visibilitychange 事件

只要document.visibilityState屬性發(fā)生變化，就會(huì)觸發(fā)visibilitychange事件。

因此，可以通過(guò)監(jiān)聽(tīng)這個(gè)事件（通過(guò)document.addEventListener()方法或document.onvisibilitychange屬性），跟蹤頁(yè)面可見(jiàn)性的變化。

document.addEventListener('visibilitychange', function () {
  // 用戶離開(kāi)了當(dāng)前頁(yè)面
  if (document.visibilityState === 'hidden') {
    document.title = '頁(yè)面不可見(jiàn)';
  }
  // 用戶打開(kāi)或回到頁(yè)面
  if (document.visibilityState === 'visible') {
    document.title = '頁(yè)面可見(jiàn)';
  }
});

上面代碼是 Page Visibility API 的最基本用法，可以監(jiān)聽(tīng)可見(jiàn)性變化。

下面是另一個(gè)例子，一旦頁(yè)面不可見(jiàn)，就暫停視頻播放。

var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);
function startStopVideo() {
  if (document.visibilityState === 'hidden') {
    vidElem.pause();
  } else if (document.visibilityState === 'visible') {
    vidElem.play();
  }
}

五、頁(yè)面卸載

下面專(zhuān)門(mén)討論一下，如何正確監(jiān)聽(tīng)頁(yè)面卸載。

頁(yè)面卸載可以分成三種情況。

• 頁(yè)面可見(jiàn)時(shí)，用戶關(guān)閉 Tab 頁(yè)或?yàn)g覽器窗口。
• 頁(yè)面可見(jiàn)時(shí)，用戶在當(dāng)前窗口前往另一個(gè)頁(yè)面。
• 頁(yè)面不可見(jiàn)時(shí)，用戶或系統(tǒng)關(guān)閉瀏覽器窗口。

這三種情況，都會(huì)觸發(fā)visibilitychange事件。前兩種情況，該事件在用戶離開(kāi)頁(yè)面時(shí)觸發(fā)；最后一種情況，該事件在頁(yè)面從可見(jiàn)狀態(tài)變?yōu)椴豢梢?jiàn)狀態(tài)時(shí)觸發(fā)。

由此可見(jiàn)，visibilitychange事件比pagehide、beforeunload、unload事件更可靠，所有情況下都會(huì)觸發(fā)（從visible變?yōu)?code>hidden）。因此，可以只監(jiān)聽(tīng)這個(gè)事件，運(yùn)行頁(yè)面卸載時(shí)需要運(yùn)行的代碼，不用監(jiān)聽(tīng)后面那三個(gè)事件。

甚至可以這樣說(shuō)，unload事件在任何情況下都不必監(jiān)聽(tīng)，beforeunload事件只有一種適用場(chǎng)景，就是用戶修改了表單，沒(méi)有提交就離開(kāi)當(dāng)前頁(yè)面。另一方面，指定了這兩個(gè)事件的監(jiān)聽(tīng)函數(shù)，瀏覽器就不會(huì)緩存當(dāng)前頁(yè)面。

參考鏈接

• Page Visibility Level 2, W3C
• Page Visibility API, David Walsh
• Using the pageVisbility API, Joe Marini
• Don't lose user and app state, use Page Visibility, Ilya Grigorik

以上就是Page Visibility API 教程示例的詳細(xì)內(nèi)容，更多關(guān)于Page Visibility API 教程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論