visibilitychange搭配document.hidden實現有意思的tab頁離開進入效果

水冗水孚發表於2023-04-02

問題描述

我們先看下面這一張效果圖：

效果圖

需求

當離開或進入tab標籤頁時，動態更改tab的title內容顯示

解決方案

其實很簡單，只是一時間我們可能想不到，不過Web的發明設計者們，早就想到了，並提供了相關的api

監聽visibilitychange事件搭配document.hidden屬性值

visibilitychange

  • visibilitychange是一個事件名
  • 此事件的觸發取決於選項卡的內容可見或被隱藏時
  • 可以使用document去監聽這個事件的變化，從而做一些邏輯的操作

document.hidden

  • 表示頁面是（true）否（false）隱藏
  • 可以理解為進入tab標籤頁和離開tab標籤頁
另有document.visibilityState為visible或hidden（常用），一個意思

知道這兩個api，那相關的需求，就能解決啦

程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="http://ashuai.work/static/img/avantar.png">
    <title>?歡迎歡迎?</title>
</head>

<body>
    <script>
        /**
         * 標籤頁標題切換
         * */
        
        // 監聽visibilitychange事件
        document.addEventListener("visibilitychange", function () {
            console.log('document.visibilityState', document.visibilityState);
            // 若是離開此tab標籤頁
            if (document.hidden) {
                document.title = "?你快回來?"
            }
            // 若是進入此tab標籤頁
            else {
                document.title = "?歡迎歡迎?"
            }
        });
    </script>
</body>

</html>

延伸使用場景

實際上，在工作中，頁面離開或隱藏觸發相應的邏輯，還是有一些場景的。如下：

  • 在當前頁播放音樂，離開當前頁暫停音樂
  • 線上做面試題時，看看求職者有沒有離開當前tab頁，去百度答案啥的
  • 離開當前tab頁，給頁面加上密碼，進入時需輸入密碼（隱私安全問題）
  • 一些blog的title效果，比如筆者的這個blog：http://ashuai.work:8890/

官方api地址：

相關文章