Chrome、Firefox 上的全屏模式问题答案

【问题标题】：Fullscreen mode issue on Chrome, FirefoxChrome、Firefox 上的全屏模式问题
【发布时间】：2014-08-14 09:38:51
【问题描述】：

我正在为这个网站做全屏功能：http://bbtfeme.wpengine.com/home

在浏览器的右下角，有一个全屏按钮。如果单击它，浏览器将进入全屏模式，然后再次单击它，浏览器将退出全屏模式。

但在 Chrome、Firefox 上，有一个小问题我无法理解：如果你点击 F11（全屏模式的快捷方式），“菜单屏幕”按钮不起作用。

我搜索了谷歌并尝试在 javascript 中使用许多技巧，但仍然失败。真的很痛苦。

谁能帮帮我？ :(

谢谢

【问题讨论】：

看看这个教程paulund.co.uk/javascript-full-screen-api

标签： javascript jquery google-chrome firefox fullscreen

【解决方案1】：

为此你需要使用这个：

    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 <p>
                    <button id="view-fullscreen">Fullscreen</button>
                    <button id="cancel-fullscreen">Cancel fullscreen</button>
                </p>
  <script>
  (function () {
    var viewFullScreen = document.getElementById("view-fullscreen");
    if (viewFullScreen) {
        viewFullScreen.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);
    }

    var cancelFullScreen = document.getElementById("cancel-fullscreen");
    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);
    }    
})();

  </script>
 </body>
</html>

【讨论】：

我试过这段代码。而且它无助于解决这个问题。

【解决方案2】：

防止浏览器F11默认行为并触发全屏按钮来模拟用户体验。如果不包含，则包含 jQuery 库。这很好用。

$(document).keyup(function(e){
   if(e.which==122){ // charCode 122 for F11 key
       e.preventDefault();
       ('#fullscreenbuttonid').click();
       return false;
   }
});

希望对你有帮助

【讨论】：

它在 Chrome 和 Firefox 上运行良好，但在 Opera 上不运行？？
IE 和 Opera 不支持 charCode 并且 Safari 为 keyPresses 提供了奇怪的值。所以我猜你不能在这些浏览器中正确捕获 charCodes。因为代码对你有用，如果你得到了你需要的，请投票/接受答案。

【解决方案3】：

你应该在执行之前验证......

    function FullScreen(divID) {
        fnFullScreen(divID, !IsFullScreen());
    }
    function IsFullScreen() {
        return (document.fullscreenElement && document.fullscreenElement !== null) ||
                 (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
                 (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
                 (document.msFullscreenElement && document.msFullscreenElement !== null);
    }
    function fnFullScreen(divID, TurnOn) { 
        if (TurnOn) {
            var docElm = $('#' + divID).parent()[0];
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            } else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            } else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            } else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            $('#' + divID).css("min-height", "100vh");
            $('.btnFullScreen').html('Exit Full Screen');
        } else { 
            if (document.exitFullscreen) {
                document.exitFullscreen().catch(() => { });
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
             
            $('#' + divID).css("min-height", "");
            $('.btnFullScreen').html('Full Screen');
        }
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div class="body">
   <div id="div1"> <button class="btnFullScreen"  onclick="FullScreen('div1')">Full Screen</button> click to full screen</div>
   </div>

【讨论】：