最近做了一個號稱很炫的B/S展示軟件，展示所用瀏覽器為Google Chrome。
要求展示時全屏，但是頁面要有退出全屏按鈕(液晶屏沒有鍵盤)。
搜索實現方式幾乎前篇一律，即兩個JS函數一個實現全屏一個退出全屏：
function requestFullScreen(element) { if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); else if (element.mozRequestFullScreen) element.mozRequestFullScreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen(); } function cancelFullScreen() { if (document.exitFullscreen) document.exitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); }
但是在實際調用中發現cancelFullScreen只對requestFullScreen實現的全屏有效而對F11實現的全屏沒有效果。
所以就想到使用requestFullScreen實現全屏，但是問題又來了requestFullScreen實現的全屏僅對當頁有效，
在頁面跳轉時全屏效果就會消失，所以還是只能通過F11實現全屏。
又搜索其中一種退出方式為除了上面兩個函數外又添加兩個函數：
function isFullScreen() { return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen; } function toggleFullScreen(element) { if (isFullScreen()) cancelFullScreen(); else requestFullScreen(element || document.documentElement); }
通過調用toggleFullScreen函數實現退出全屏。
實現原理為：雖然之前已經F11全屏，但是isFullScreen檢測結果依然為false，所以會調用requestFullScreen再次全屏。
而在剛開始實現全屏時會彈出退出全屏話框間接實現退出功能。
但是該方法也有個問題即會彈出兩次退出全屏對話框，一次是JS調用全屏退出對話框一次是F11調用全屏對話框，如下：
修改toggleFullScreen如下便只彈出一次對話框：
function toggleFullScreen(element) { requestFullScreen(element || document.documentElement); cancelFullScreen(); }
完整代碼參考：
<html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-1.10.1.min.js"></script> <script> function isFullScreen() { return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen; } function requestFullScreen(element) { if (element.requestFullscreen) element.requestFullscreen(); else if (element.msRequestFullscreen) element.msRequestFullscreen(); else if (element.mozRequestFullScreen) element.mozRequestFullScreen(); else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen(); } function cancelFullScreen() { if (document.exitFullscreen) document.exitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); else if (document.mozCancelFullScreen) document.mozCancelFullScreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); } function toggleFullScreen(element) { requestFullScreen(element || document.documentElement); cancelFullScreen(); } $(document).ready(function(){ $("#exit").click(function(){ toggleFullScreen(document.body); }); }); </script> </head> <body> <div style="padding-top:300px;"></div> <button id="exit">退出</button> </body> </html>