如何用BOM實(shí)現(xiàn)全屏顯示頁面？

要讓頁面進(jìn)入全屏顯示，主要依賴瀏覽器提供的fullscreen api，通過調(diào)用目標(biāo)元素的requestfullscreen()方法實(shí)現(xiàn)。1. 首先需獲取目標(biāo)元素（如document.documentelement）并綁定用戶觸發(fā)事件（如按鈕點(diǎn)擊），確保全屏請求由用戶主動行為發(fā)起；2. 在事件處理函數(shù)中判斷當(dāng)前是否處于全屏狀態(tài)，分別調(diào)用requestfullscreen()或exitfullscreen()方法，并兼容不同瀏覽器的前綴實(shí)現(xiàn)；3. 監(jiān)聽fullscreenchange事件以響應(yīng)全屏狀態(tài)變化，同時(shí)監(jiān)聽fullscreenerror事件捕獲錯(cuò)誤并提示用戶；4. 全屏請求失敗常見于非用戶手勢觸發(fā)、iframe權(quán)限不足、協(xié)議不安全等，排查時(shí)應(yīng)優(yōu)先檢查觸發(fā)上下文和瀏覽器控制臺信息；5. 全屏模式下可通過自定義退出按鈕、優(yōu)化內(nèi)容布局、支持鍵盤快捷鍵等方式提升用戶體驗(yàn)；6. bom全屏與css全屏有本質(zhì)區(qū)別，前者隱藏瀏覽器界面實(shí)現(xiàn)真正全屏，后者僅通過css樣式占據(jù)窗口空間，保留瀏覽器ui。

要讓頁面進(jìn)入全屏顯示，我們主要依賴的是瀏覽器提供的全屏API，這套API是瀏覽器對象模型（BOM）的一部分，它允許網(wǎng)頁元素請求進(jìn)入或退出瀏覽器的原生全屏模式。核心在于調(diào)用元素的 requestFullscreen() 方法，并妥善處理相關(guān)的事件和狀態(tài)。

解決方案

要實(shí)現(xiàn)全屏，最直接的方法就是找到你想要全屏的元素，然后調(diào)用它的 requestFullscreen() 方法。通常，我們希望整個(gè)頁面全屏，所以目標(biāo)元素會是 document.documentElement（也就是 標(biāo)簽）。

這里有個(gè)小小的陷阱，或者說是一個(gè)重要的安全考量：瀏覽器不會允許你隨意地讓一個(gè)頁面全屏，這必須是用戶主動觸發(fā)的。比如，點(diǎn)擊一個(gè)按鈕。所以，代碼通常會綁定在一個(gè)事件監(jiān)聽器里。

// 獲取你想要全屏的元素，通常是整個(gè)html文檔 const docElement = document.documentElement;  // 綁定一個(gè)點(diǎn)擊事件，例如給一個(gè)按鈕 const fullscreenButton = document.getElementById('fullscreenToggle');  if (fullscreenButton) {     fullscreenButton.addEventListener('click', () => {         if (!document.fullscreenElement) { // 檢查當(dāng)前是否已處于全屏狀態(tài)             // 嘗試進(jìn)入全屏             if (docElement.requestFullscreen) {                 docElement.requestFullscreen();             } else if (docElement.mozRequestFullScreen) { /* Firefox */                 docElement.mozRequestFullScreen();             } else if (docElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */                 docElement.webkitRequestFullscreen();             } else if (docElement.msRequestFullscreen) { /* IE/Edge */                 docElement.msRequestFullscreen();             }         } else {             // 如果已經(jīng)在全屏模式，則退出全屏             if (document.exitFullscreen) {                 document.exitFullscreen();             } else if (document.mozCancelFullScreen) { /* Firefox */                 document.mozCancelFullScreen();             } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */                 document.webkitExitFullscreen();             } else if (document.msExitFullscreen) { /* IE/Edge */                 document.msExitFullscreen();             }         }     }); }  // 監(jiān)聽全屏狀態(tài)變化，以便更新UI或執(zhí)行其他邏輯 document.addEventListener('fullscreenchange', () => {     if (document.fullscreenElement) {         console.log('頁面進(jìn)入全屏模式');         // 可以在這里調(diào)整UI，比如隱藏導(dǎo)航欄     } else {         console.log('頁面退出全屏模式');         // 恢復(fù)UI     } });  // 監(jiān)聽全屏請求失敗事件 document.addEventListener('fullscreenerror', (event) => {     console.error('全屏請求失敗:', event);     alert('抱歉，無法進(jìn)入全屏模式。可能原因：非用戶手勢觸發(fā)、權(quán)限問題或?yàn)g覽器不支持。'); });

這段代碼涵蓋了進(jìn)入和退出全屏的邏輯，并且考慮了瀏覽器前綴兼容性，以及對全屏狀態(tài)變化和錯(cuò)誤的處理。document.fullscreenElement 是一個(gè)非常實(shí)用的屬性，它會返回當(dāng)前處于全屏模式的元素，如果沒有元素處于全屏模式，則為 NULL。

為什么我的全屏請求被拒絕了？

這真是個(gè)常見的問題，我遇到過不止一次，一開始會覺得很困惑。全屏API的設(shè)計(jì)考慮到了用戶體驗(yàn)和安全，所以它不是你想用就能用的。最主要的原因，幾乎可以肯定地說，就是用戶手勢。瀏覽器會嚴(yán)格要求全屏操作必須是由用戶的直接交互行為觸發(fā)的，比如點(diǎn)擊按鈕、觸摸屏幕。如果你嘗試在頁面加載時(shí)自動全屏，或者在計(jì)時(shí)器回調(diào)里全屏，那幾乎百分之百會失敗，瀏覽器會默默地拒絕你的請求，或者觸發(fā) fullscreenerror 事件。這是為了防止惡意網(wǎng)站劫持你的屏幕。

此外，還有一些不那么常見但同樣重要的原因：比如，你的頁面可能嵌入在一個(gè)

全屏模式下，用戶體驗(yàn)還能優(yōu)化嗎？

當(dāng)然可以，而且非常必要！進(jìn)入全屏模式后，瀏覽器本身的UI（地址欄、書簽欄、標(biāo)簽頁等）都會被隱藏，這為你的內(nèi)容提供了最大的展示空間。但與此同時(shí)，你也接管了更多的用戶交互責(zé)任。

首先，自定義控制。既然瀏覽器的控制不見了，你可能需要提供自己的“退出全屏”按鈕，或者其他導(dǎo)航、播放控制等。用戶習(xí)慣了按 Esc 鍵退出全屏，但提供一個(gè)顯眼的按鈕會更友好。

其次，內(nèi)容適應(yīng)。全屏后，你的內(nèi)容可能會被拉伸或壓縮，所以響應(yīng)式設(shè)計(jì)在這里尤為重要。確保你的布局在各種寬高比下都能良好顯示，圖片和視頻不會失真。

再來，鍵盤快捷鍵。在全屏模式下，一些常見的瀏覽器快捷鍵可能會被禁用，但你仍然可以監(jiān)聽鍵盤事件來提供自定義的快捷操作，比如播放/暫停視頻、切換幻燈片等。但要小心，不要劫持 Esc 鍵，讓用戶能順利退出全屏。

最后，別忘了無障礙性。確保你的全屏體驗(yàn)對所有用戶都是友好的，包括使用屏幕閱讀器或鍵盤導(dǎo)航的用戶。提供清晰的焦點(diǎn)指示和語義化的HTML結(jié)構(gòu)，即使在全屏模式下也同樣重要。我個(gè)人覺得，全屏模式下內(nèi)容往往是沉浸式的，如果能把所有不必要的邊框、滾動條都隱藏掉，只留下核心內(nèi)容，那種體驗(yàn)是極佳的。

BOM全屏與CSS全屏有什么區(qū)別？

這是一個(gè)非常關(guān)鍵的區(qū)別，很多新手會混淆。簡單來說，BOM全屏（即使用Fullscreen API）是讓元素進(jìn)入瀏覽器原生全屏模式。這意味著瀏覽器自身的界面（地址欄、工具欄、標(biāo)簽頁等）會被隱藏，你的頁面內(nèi)容會獨(dú)占整個(gè)屏幕，就像你在看電影時(shí)按下了全屏按鈕一樣。這種模式下，用戶通常只能通過按 Esc 鍵或你提供的退出按鈕來離開。它是真正意義上的“全屏”。

而CSS全屏，通常指的是你通過CSS將一個(gè)元素（比如一個(gè) div 或 video）的 width 和 height 設(shè)置為 100vw 和 100vh，再結(jié)合 position: fixed; top: 0; left: 0; z-index: 9999; 等屬性，讓它在當(dāng)前瀏覽器窗口內(nèi)占據(jù)全部可見空間。這種方式并不會隱藏瀏覽器本身的UI，它只是在當(dāng)前網(wǎng)頁的“畫布”上，讓某個(gè)元素最大化顯示。瀏覽器地址欄、工具欄依然可見。它更像是一種“最大化顯示在當(dāng)前窗口內(nèi)”的效果，而不是真正的全屏。

所以，如果你想提供沉浸式的、無干擾的體驗(yàn)，比如視頻播放器、游戲、幻燈片展示，那么你需要使用BOM的Fullscreen API。如果你只是想讓某個(gè)彈出層或圖片在當(dāng)前頁面內(nèi)放大顯示，不希望隱藏瀏覽器UI，那么CSS全屏（或者說css布局技巧）就足夠了。理解這兩者的本質(zhì)差異，能幫助你選擇正確的實(shí)現(xiàn)方式。