一、什么是visibilitychange事件？

visibilitychange 是瀏覽器提供的原生事件，屬于 Page Visibility API（頁面可見性 API）的核心部分。當頁面的可見性狀態(tài)發(fā)生變化時（如頁面從 “顯示” 變?yōu)?“隱藏”，或從 “隱藏” 變?yōu)?“顯示”），瀏覽器會觸發(fā)該事件，當然如果是uniapp或者是wx也會提供類似apphide appshow這些API。

• 核心作用：判斷頁面是否處于用戶可見狀態(tài)（前臺）或不可見狀態(tài)（后臺，如切換到其他 App、瀏覽器標簽頁被切換、手機鎖屏等）。

二、核心屬性與事件

1.document.hidden（狀態(tài)判斷核心）

• 布爾值，true 表示頁面當前不可見（后臺），false 表示頁面可見（前臺）。
• 是判斷頁面狀態(tài)的直接依據(jù)。

2.document.visibilityState（更詳細的狀態(tài)描述）

• 字符串類型，返回頁面的具體可見性狀態(tài)，有 4 種可能值：

  • visible：頁面可見（至少部分可見，如瀏覽器窗口未最小化，標簽頁激活）。
  • hidden：頁面不可見（如切換到其他標簽頁、瀏覽器最小化、手機切后臺）。
  • prerender：頁面正在預渲染（用戶未實際看到，通常用于優(yōu)化加載，部分瀏覽器支持）。
  • unloaded：頁面即將被卸載（如關閉標簽頁，部分瀏覽器支持）。

• 實際開發(fā)中，hidden 和 visible 是最常用的兩個狀態(tài)。

3.visibilitychange事件

• 當 document.visibilityState 或 document.hidden 變化時觸發(fā)，需通過 document.addEventListener 監(jiān)聽。

三、基本用法（完整代碼示例）

1. 基礎監(jiān)聽邏輯

// 監(jiān)聽 visibilitychange 事件
document.addEventListener('visibilitychange', handleVisibilityChange);

// 事件處理函數(shù)
function handleVisibilityChange() {
  // 方法1：用 document.hidden 判斷
  if (document.hidden) {
    console.log('頁面進入后臺（不可見）');
    // 執(zhí)行后臺邏輯：暫停視頻、清除定時器、保存數(shù)據(jù)等
    pauseVideo();
    clearInterval(timer);
    saveUserState();
  } else {
    console.log('頁面回到前臺（可見）');
    // 執(zhí)行前臺邏輯：恢復視頻播放、重啟定時器、刷新數(shù)據(jù)等
    playVideo();
    restartTimer();
    refreshData();
  }

  // 方法2：用 document.visibilityState 判斷（更細致）
  switch (document.visibilityState) {
    case 'visible':
      console.log('頁面可見（前臺）');
      break;
    case 'hidden':
      console.log('頁面隱藏（后臺）');
      break;
    case 'prerender':
      console.log('頁面預渲染中');
      break;
    case 'unloaded':
      console.log('頁面即將卸載');
      break;
  }
}

2. 解除監(jiān)聽（避免內(nèi)存泄漏）

當頁面不需要監(jiān)聽狀態(tài)變化時（如組件銷毀），需移除事件監(jiān)聽：

// 頁面卸載前解除監(jiān)聽
window.addEventListener('beforeunload', function() {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});

// 或在 Vue/React 組件銷毀時（以 Vue 為例）
export default {
  beforeDestroy() {
    document.removeEventListener('visibilitychange', this.handleVisibilityChange);
  }
};

四、適用場景

1. 媒體播放控制

• 頁面切后臺時暫停視頻 / 音頻，切回前臺時恢復播放：

  const video = document.getElementById('myVideo');
  function handleVisibilityChange() {
    if (document.hidden) {
      video.pause(); // 切后臺暫停
    } else {
      video.play(); // 切前臺恢復
    }
  }
  

2. 減少無效請求

• 頁面在后臺時，暫停輪詢接口（如實時聊天、數(shù)據(jù)刷新），避免浪費資源：

  let pollTimer;
  function startPoll() {
    pollTimer = setInterval(() => {
      fetch('/api/refresh'); // 輪詢接口
    }, 5000);
  }
  function stopPoll() {
    clearInterval(pollTimer);
  }
  
  function handleVisibilityChange() {
    if (document.hidden) {
      stopPoll(); // 后臺停止輪詢
    } else {
      startPoll(); // 前臺重啟輪詢
    }
  }
  

3. 記錄用戶在線狀態(tài)

• 切后臺時記錄 “離線時間”，切前臺時更新 “在線狀態(tài)”：

  let lastLeaveTime;
  function handleVisibilityChange() {
    if (document.hidden) {
      lastLeaveTime = new Date().getTime(); // 記錄切后臺時間
      reportUserState('offline'); // 上報離線狀態(tài)
    } else {
      const onlineTime = new Date().getTime() - lastLeaveTime;
      console.log(`用戶離線時長：${onlineTime}ms`);
      reportUserState('online'); // 上報在線狀態(tài)
    }
  }
  

4. 防止表單數(shù)據(jù)丟失

• 切后臺時自動保存表單草稿，避免用戶忘記提交：

  function saveFormDraft() {
    const formData = {
      username: document.getElementById('username').value,
      content: document.getElementById('content').value
    };
    localStorage.setItem('formDraft', JSON.stringify(formData));
  }
  
  function handleVisibilityChange() {
    if (document.hidden) {
      saveFormDraft(); // 切后臺時保存草稿
    }
  }
  

五、兼容性與瀏覽器支持

1. 主流瀏覽器支持情況

• PC 端：Chrome、Firefox、Edge、Safari（≥6.1）全支持。
• 移動端：微信內(nèi)置瀏覽器、手機 Chrome、Safari（iOS ≥7.1）、安卓系統(tǒng)瀏覽器（≥4.4）全支持。
• 低版本兼容：IE10+ 支持，但需用前綴 msVisibilityChange 和 msHidden（實際開發(fā)中可忽略，IE 市場占比極低）。

六、注意

1. 與pagehide/pageshow的區(qū)別

• visibilitychange：僅關注頁面 “可見性”（是否在前臺），不關心頁面是否卸載（如切換標簽頁時觸發(fā)，但頁面未關閉。
• pagehide：頁面即將被卸載時觸發(fā)（如關閉標簽頁、跳轉(zhuǎn)頁面），但切后臺時也可能觸發(fā)，場景更寬泛，判斷精度低于 visibilitychange。
• 結論：判斷 “切后臺” 優(yōu)先用 visibilitychange，判斷 “頁面關閉” 可用 pagehide。

2. 微信 / 企業(yè)微信環(huán)境的特殊性

• 微信內(nèi)置瀏覽器完全支持 visibilitychange，無需依賴微信 JS-SDK，可直接使用。
• 但需注意：微信中 “分享到朋友圈 / 好友” 時，頁面會短暫切后臺再切回，可能觸發(fā)一次 visibilitychange（從 visible → hidden → visible），需根據(jù)業(yè)務判斷是否忽略這種場景。

3. 避免過度使用

• 頻繁觸發(fā)的邏輯（如大量 DOM 操作）放在 visibilitychange 中可能影響性能，建議僅處理必要操作（如暫停 / 恢復、保存數(shù)據(jù)）。

4. 鎖屏狀態(tài)的觸發(fā)

• 手機鎖屏時，頁面會被視為 “隱藏”，觸發(fā) visibilitychange（document.hidden = true）；解鎖后恢復，觸發(fā) visible。

visibilitychange 事件是 H5 頁面監(jiān)聽 “前臺 / 后臺切換” 的最優(yōu)方案，具有以下優(yōu)勢：

• 原生支持：無需依賴任何 SDK（包括微信 / 企業(yè)微信），兼容性極佳。
• 精準可靠：能覆蓋 “切 App、切換標簽頁、鎖屏” 等所有頁面可見性變化場景。
• 用法簡單：通過 document.hidden 或 visibilityState 即可判斷狀態(tài)，代碼邏輯清晰。

缺點:無法區(qū)分隱藏原因

是的，你沒看錯，先前講到的只是常規(guī)情況下用戶手動切換后臺的觸發(fā)， 但是在一些場景下還是要慎用

1. 無法區(qū)分 “切后臺” 的具體原因

visibilitychange 只能判斷頁面 “可見” 或 “隱藏”，但無法區(qū)分隱藏的具體場景，例如：

• 用戶是 “切換到其他 App” 還是 “切換到瀏覽器的其他標簽頁”？
• 是 “手機鎖屏” 還是 “瀏覽器窗口最小化”？
• 是 “分享到微信好友后暫時離開” 還是 “徹底關閉頁面”？

2. 部分瀏覽器 / 場景下觸發(fā)時機不精準

• 微信 / 支付寶等 App 內(nèi)置瀏覽器：在某些操作（如點擊分享、拉起原生組件）時，可能會出現(xiàn) “短暫隱藏再恢復” 的誤觸發(fā)。例如，在微信中點擊 “分享到朋友圈”，頁面會先切后臺（觸發(fā) hidden），分享完成后切回前臺（觸發(fā) visible），但用戶實際并未離開頁面，可能干擾業(yè)務邏輯（如暫停的視頻被誤觸發(fā)播放 / 暫停）。
• iOS 端的特殊行為：在 iOS Safari 中，當頁面處于后臺且內(nèi)存不足時，瀏覽器可能會凍結頁面 JS 執(zhí)行，導致 visibilitychange 事件在頁面恢復時延遲觸發(fā)，或部分邏輯（如定時器）無法正常執(zhí)行。

3. 無法監(jiān)聽 “頁面關閉” 的最終狀態(tài)

visibilitychange 的 unloaded 狀態(tài)在多數(shù)瀏覽器中支持不佳，且頁面真正關閉時（如用戶點擊關閉標簽頁），visibilitychange 可能與 beforeunload、pagehide 事件順序混亂，難以可靠判斷 “用戶是否徹底離開”。例如，用戶關閉標簽頁時，hidden 會先變?yōu)?nbsp;true，但此時頁面即將卸載，后續(xù)邏輯（如上報數(shù)據(jù)）可能因頁面關閉而中斷。

4. 對 “部分可見” 狀態(tài)的判斷有限

document.visibilityState = 'visible' 表示頁面 “至少部分可見”（如瀏覽器窗口只露出一小塊），但無法判斷頁面是否 “完全可見”（如被其他窗口遮擋了大部分）。如果業(yè)務需要精確判斷 “用戶是否正在全屏瀏覽”，visibilitychange 無法滿足，需結合 document.fullscreenElement 等 API 輔助判斷。

用戶是 “切換到其他 App” 還是 “切換到瀏覽器的其他標簽頁”？

是 “手機鎖屏” 還是 “瀏覽器窗口最小化”

是 “分享到微信好友后暫時離開” 還是 “徹底關閉頁面”？

上面三種是常見的場景，通?？梢赃@樣的輔助方法進行判斷

一、區(qū)分 “切換到其他 App” vs “切換到瀏覽器其他標簽頁”

核心思路：利用瀏覽器標簽頁的 “焦點狀態(tài)” 和 “頁面可見性” 的關聯(lián)性

• 切換到瀏覽器其他標簽頁時：頁面失去焦點（window.blur）且可見性變?yōu)殡[藏（document.hidden = true），但瀏覽器進程仍在運行，setTimeout 等定時器可能繼續(xù)執(zhí)行（取決于瀏覽器優(yōu)化策略）。
• 切換到其他 App時：頁面不僅隱藏（document.hidden = true），還可能伴隨瀏覽器進程被 “凍結”（尤其是移動端），定時器執(zhí)行會延遲或暫停。

輔助判斷方法：

1. 結合 focus/blur 事件與定時器延遲檢測（一般情況可用，所以慎用）：

   let isTabSwitch = false;
   let timer;
   
   // 監(jiān)聽可見性變化
   document.addEventListener('visibilitychange', () => {
     if (document.hidden) {
       // 頁面隱藏時啟動定時器，檢測延遲
       timer = setTimeout(() => {
         // 若定時器延遲超過100ms，大概率是切換到其他App（瀏覽器被凍結）
         console.log('可能切換到其他App');
       }, 100);
     } else {
       clearTimeout(timer);
       // 頁面恢復時，若之前觸發(fā)了blur且無明顯延遲，可能是切換標簽頁
       if (isTabSwitch) {
         console.log('可能切換到瀏覽器其他標簽頁');
         isTabSwitch = false;
       }
     }
   });
   
   // 監(jiān)聽焦點變化
   window.addEventListener('blur', () => {
     if (document.hidden) {
       isTabSwitch = true; // 隱藏時失去焦點，可能是切換標簽頁
     }
   });
   

   • 原理：切換標簽頁時，瀏覽器仍在前臺運行，定時器延遲較?。磺袚Q到其他 App 時，瀏覽器進入后臺，定時器可能被延遲執(zhí)行。

二、區(qū)分 “手機鎖屏” vs “瀏覽器窗口最小化”

核心思路：利用 “鎖屏” 的特殊性 —— 通常伴隨設備屏幕關閉，而 “窗口最小化” 僅窗口不可見

• 手機鎖屏時：屏幕完全關閉，瀏覽器可能觸發(fā) visibilitychange 且后續(xù)操作（如觸摸事件）完全失效。
• 瀏覽器窗口最小化（PC 端）：屏幕仍亮，只是窗口不可見。

輔助判斷方法：

1. 結合 screen 對象的亮度或喚醒狀態(tài)（移動端有限支持）：

   document.addEventListener('visibilitychange', () => {
     if (document.hidden) {
       // 檢測屏幕是否變暗（部分設備支持）
       if (typeof screen.brightness !== 'undefined' && screen.brightness < 0.1) {
         console.log('可能是手機鎖屏');
       } else {
         console.log('可能是瀏覽器窗口最小化');
       }
     }
   });
   

   • 注意：screen.brightness 兼容性較差（主要支持安卓部分瀏覽器），iOS 基本不支持。

2. 監(jiān)聽 touchstart 事件是否失效（移動端）：鎖屏后，頁面無法接收觸摸事件，可在頁面恢復可見時檢測是否有 “鎖屏期間的觸摸記錄”（無記錄則可能是鎖屏）：

   let hasTouchDuringHidden = false;
   document.addEventListener('touchstart', () => {
     if (document.hidden) {
       hasTouchDuringHidden = true;
     }
   });
   
   document.addEventListener('visibilitychange', () => {
     if (!document.hidden) {
       if (!hasTouchDuringHidden) {
         console.log('可能是手機鎖屏（期間無觸摸）');
       } else {
         console.log('可能是窗口最小化（期間可能有觸摸其他窗口）');
         hasTouchDuringHidden = false;
       }
     }
   });
   

三、區(qū)分 “分享到微信好友后暫時離開” vs “徹底關閉頁面”

核心思路：利用 “分享” 操作的前置行為（如點擊分享按鈕）和頁面生命周期差異

• 分享到微信好友后暫時離開：用戶點擊分享按鈕 → 頁面隱藏 → 分享完成后用戶可能返回，頁面會再次觸發(fā) visible。
• 徹底關閉頁面：頁面隱藏后，會接著觸發(fā) pagehide 或 beforeunload 事件，且不會再恢復 visible。

輔助判斷方法：

1. 監(jiān)聽微信分享按鈕的點擊事件（微信 H5 場景）：在微信環(huán)境中，用戶分享前通常會點擊自定義的 “分享按鈕”，可通過該行為標記 “可能是分享導致的離開”：

   let isSharing = false;
   // 假設分享按鈕id為shareBtn
   document.getElementById('shareBtn').addEventListener('click', () => {
     isSharing = true; // 標記用戶觸發(fā)了分享操作
   });
   
   document.addEventListener('visibilitychange', () => {
     if (document.hidden) {
       if (isSharing) {
         console.log('可能是分享到微信好友后暫時離開');
         // 30秒后若未恢復可見，視為可能關閉頁面
         setTimeout(() => {
           if (document.hidden) {
             console.log('分享后未返回，可能已關閉頁面');
             isSharing = false;
           }
         }, 30000);
       } else {
         console.log('可能是其他原因關閉頁面');
       }
     } else {
       if (isSharing) {
         console.log('分享后返回頁面');
         isSharing = false;
       }
     }
   });
   

2. 結合 pagehide 事件判斷頁面是否卸載：徹底關閉頁面時，pagehide 事件會在 visibilitychange 之后觸發(fā)，可通過該事件確認 “頁面已關閉”：

   let isPageClosed = false;
   window.addEventListener('pagehide', () => {
     isPageClosed = true;
     console.log('頁面已關閉');
   });
   
   document.addEventListener('visibilitychange', () => {
     if (document.hidden && !isPageClosed) {
       console.log('頁面隱藏但未關閉（可能是分享后暫時離開）');
     }
   });
   

   總結：

   沒有絕對的完美，只有不斷地完善，當后臺切換時還是要盡可能的與原有應用進行事件關聯(lián)才會更準確的判斷用戶的操作行為。

到此這篇關于h5后臺切換檢測利用visibilitychange的缺點超詳細分析的文章就介紹到這了,更多相關h5后臺切換檢測visibilitychange內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論