實現JS全屏功能的核心在于調用瀏覽器提供的全屏api并處理兼容性問題。1. 使用帶有不同前綴的api如requestfullscreen、mozrequestfullscreen、webkitrequestfullscreen和msrequestfullscreen實現進入全屏；2. 通過exitfullscreen、mozcancelfullscreen、webkitexitfullscreen和msexitfullscreen退出全屏；3. 監聽fullscreenchange及其帶前綴版本事件以響應全屏狀態變化；4. 瀏覽器窗口全屏無法直接通過js控制，但可通過快捷鍵或electron等框架實現；5. 全屏后通過css媒體查詢或JavaScript動態調整布局防止內容溢出，并嘗試監聽鍵盤事件禁用默認快捷鍵（受限于瀏覽器安全策略）。
實現JS全屏功能，主要通過調用瀏覽器提供的全屏API，核心在于請求進入全屏模式和退出全屏模式。不同瀏覽器前綴可能略有差異，需要做一些兼容性處理。
頁面全屏的5種實現技巧分享！
如何兼容不同瀏覽器的全屏API？
不同瀏覽器對全屏API的支持情況不盡相同，主要體現在API的前綴上。例如，chrome使用requestFullscreen，而firefox使用mozRequestFullScreen，safari則使用webkitRequestFullscreen。為了實現跨瀏覽器的兼容，我們需要編寫一個兼容性處理函數。
function requestFullScreen(element) { // 支持全屏的通用函數 if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { // Firefox element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { // IE/Edge element.msRequestFullscreen(); } } function exitFullScreen() { // 退出全屏的通用函數 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { // Firefox document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { // IE/Edge document.msExitFullscreen(); } } // 示例：讓id為"myVideo"的元素全屏 let element = document.getElementById("myVideo"); requestFullScreen(element); // 退出全屏 // exitFullScreen();
上述代碼定義了requestFullScreen和exitFullScreen兩個函數，分別用于請求進入全屏模式和退出全屏模式。函數內部通過判斷瀏覽器支持的API前綴，調用相應的全屏API。注意，全屏請求通常需要用戶交互觸發，否則可能會被瀏覽器阻止。
如何監聽全屏事件，以便在全屏狀態改變時執行相應操作？
全屏狀態的改變會觸發特定的事件，我們可以通過監聽這些事件來執行相應的操作，比如調整布局、更新ui等。同樣，不同瀏覽器使用的事件名稱也可能不同。
function fullScreenChange() { // 全屏狀態改變時觸發 if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) { // 進入全屏 console.log("進入全屏"); } else { // 退出全屏 console.log("退出全屏"); } } // 監聽全屏事件 document.addEventListener("fullscreenchange", fullScreenChange); document.addEventListener("mozfullscreenchange", fullScreenChange); document.addEventListener("webkitfullscreenchange", fullScreenChange); document.addEventListener("msfullscreenchange", fullScreenChange);
這段代碼監聽了fullscreenchange、mozfullscreenchange、webkitfullscreenchange和msfullscreenchange四個事件，當全屏狀態改變時，fullScreenChange函數會被調用。函數內部通過判斷當前是否有全屏元素來確定是進入全屏還是退出全屏狀態。
除了元素全屏，還可以實現瀏覽器窗口全屏嗎？
雖然元素全屏更常見，但有時我們也需要實現瀏覽器窗口的全屏，也就是進入”沉浸式”全屏，隱藏瀏覽器的地址欄和標簽欄。這種全屏模式通常用于游戲或需要完全沉浸式體驗的應用。
遺憾的是，直接通過JavaScript控制瀏覽器窗口全屏的能力是有限的，主要是出于安全考慮。不過，可以通過F11鍵（windows）或Ctrl+Shift+F（部分linux環境）等快捷鍵來手動切換瀏覽器窗口的全屏狀態。
對于Electron等桌面應用框架，則提供了更強大的窗口控制能力，可以方便地實現窗口全屏。但這些方法不適用于普通的Web頁面。
全屏后如何防止頁面內容溢出或顯示不完整？
全屏后，頁面內容可能會因為分辨率變化而出現溢出或顯示不完整的情況。為了解決這個問題，我們需要根據全屏狀態動態調整頁面布局和樣式。
一種常見的做法是使用css媒體查詢，根據屏幕的寬高比或分辨率來應用不同的樣式。
/* 默認樣式 */ body { font-size: 16px; } /* 全屏時的樣式 */ @media (orientation: landscape) and (min-width: 1024px) { body { font-size: 20px; /* 調整字體大小 */ } }
另一種方法是使用JavaScript動態計算頁面元素的尺寸和位置，確保它們在全屏狀態下能夠正確顯示。
function adjustLayout() { // 計算頁面元素的尺寸和位置 let width = window.innerWidth; let height = window.innerHeight; // 根據屏幕尺寸調整元素的樣式 let element = document.getElementById("myElement"); element.style.width = width * 0.8 + "px"; element.style.height = height * 0.6 + "px"; } // 在全屏事件和窗口大小改變事件中調用adjustLayout函數 document.addEventListener("fullscreenchange", adjustLayout); window.addEventListener("resize", adjustLayout);
如何在全屏模式下禁用瀏覽器的默認快捷鍵？
在全屏模式下，用戶仍然可以使用瀏覽器的默認快捷鍵，比如F11退出全屏。有時，我們需要禁用這些快捷鍵，以提供更沉浸式的體驗。
禁用瀏覽器默認快捷鍵通常需要使用JavaScript監聽鍵盤事件，并阻止默認行為。但是，出于安全考慮，瀏覽器對鍵盤事件的控制做了很多限制，無法完全禁用所有快捷鍵。
document.addEventListener("keydown", function(event) { // 禁用F11鍵 if (event.keyCode === 122) { event.preventDefault(); } });
這段代碼嘗試禁用F11鍵，但可能在某些瀏覽器中無效。更可靠的方法是使用專門的API或框架，比如Electron，它們提供了更強大的鍵盤控制能力。
