JS 全屏和退出全屏
js實現瀏覽器窗口全屏和退出全屏的功能，市面上主流瀏覽器如：谷歌、火狐、360等都是兼容的，不過IE低版本有點瑕疵（全屏狀態下仍有底部的狀態欄）。
這個demo基本是夠了，直接復制下面的源碼另存為html文件看效果吧。
<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js全屏和退出全屏代碼</title><body><!-- requestFullScreen(document.documentElement): 整個網頁進入全屏 requestFullScreen(document.getElementById("video-box")): 指定某塊區域全屏 --><button onclick="requestFullScreen(document.documentElement)">全屏顯示</button><button onclick="exitFull()">退出全屏</button></body><script type="text/javascript">function requestFullScreen(element) { // 判斷各種瀏覽器，找到正確的方法 var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } }}//退出全屏 判斷瀏覽器種類
function exitFull() { // 判斷各種瀏覽器，找到正確的方法 var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); } else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } }}</script></html>感謝閱讀，希望嫩幫助到大家，謝謝大家對本站的支持！
以下是其它網友的補充
我們知道，瀏覽器全屏通常按快捷鍵F11。JS控制瀏覽器全屏也不稀奇，它讓Web應用看上去更像似原生軟件應用效果。比如點餐系統、叫號系統等等。
JS讓瀏覽器全屏及退出全屏的方法網上很多，這不是重點，重點是需注意：瀏覽器全屏只能通過鼠標手勢點擊事件去觸發。
JS全屏方法
var $fullScreen = document.getElementById("js-fullScreen");//按鈕 if ($fullScreen) { $fullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); } JS退出全屏方法
var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); if ($cancelFullScreen) { $cancelFullScreen.addEventListener("click", function () { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } }, false); } 控制臺警告
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
釋義：在"Element"上執行"requestFullscreen"方法失敗，javascript API僅允許通過手勢去創建！（即沒有權限）
通常是由于程序員想觸發瀏覽器自動全屏顯示而導致。但是很抱歉，此方法行不通，必須通過手勢去創建，哪怕onload、trigger()、mouseover也觸發不了！
官方解釋
該Element.requestFullscreen()方法發出異步請求，使元素全屏顯示。但不能保證元素將被放入全屏模式。
如果允許進入全屏模式，文檔將收到一個fullscreenchange事件，讓它知道它現在處于全屏模式。如果權限被拒絕，則文檔會接收到一個fullscreenerror事件。
結論
可能出于用戶操作體驗的考慮吧，客戶端javascript讓瀏覽器全屏只能通過鼠標手勢點擊事件去觸發，即click()。
新聞熱點
疑難解答
