文件：visibilitychange 事件
當 visibilitychange 事件在文件上觸發時，表示其選項卡的內容已變得可見或已被隱藏。
該事件不可取消。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("visibilitychange", (event) => { })
onvisibilitychange = (event) => { }
事件型別
一個通用的 Event。
用法說明
該事件不包含文件的更新後的可見性狀態，但你可以從文件的 visibilityState 屬性中獲取該資訊。
當用戶導航到新頁面、切換選項卡、關閉選項卡、最小化或關閉瀏覽器，或者在移動裝置上從瀏覽器切換到其他應用程式時，此事件會以 hidden 的 visibilityState 觸發。轉換為 hidden 是頁面上最後一個可可靠觀察到的事件，因此開發者應將其視為使用者會話可能已結束（例如，用於 傳送分析資料）。
轉換為 hidden 也是頁面可以停止進行 UI 更新並停止使用者不想在後臺執行的任何任務的一個好時機。
示例
在轉換為 hidden 時暫停音樂
此示例在頁面隱藏時暫停播放音訊，並在頁面再次可見時恢復播放。有關完整示例，請參閱 Page Visibility API：頁面隱藏時暫停音訊 文件。
js
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
playingOnHide = !audio.paused;
audio.pause();
} else if (playingOnHide) {
// Resume playing if audio was "playing on hide"
audio.play();
}
});
在轉換為 hidden 時傳送會話結束分析
此示例將轉換為 hidden 視為使用者會話的結束，並使用 Navigator.sendBeacon() API 傳送適當的分析資料。
js
document.onvisibilitychange = () => {
if (document.visibilityState === "hidden") {
navigator.sendBeacon("/log", analyticsData);
}
};
規範
| 規範 |
|---|
| HTML # event-visibilitychange |
| HTML # handler-onvisibilitychange |
瀏覽器相容性
載入中…
另見
- Page Visibility API
Document.visibilityStateDocument.hidden- 不要丟失使用者和應用程式狀態，請使用頁面可見性詳細解釋了為什麼要使用
visibilitychange，而不是beforeunload/unload。 - Page Lifecycle API 為在 Web 應用程式中處理頁面生命週期行為提供了最佳實踐指導。