Question

我正在为此网站执行全屏功能：http://bbtfeme.wpengine.com/home

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

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

我搜索了gooogle并试图在javascript中使用很多技巧，但仍然失败了。那真是一种痛苦。

任何人都可以帮助我吗？ :(

由于

Answer 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>

Answer 2

防止浏览器F11默认行为并触发全屏按钮以模拟用户体验。如果不包含jQuery lib，请包含它。这很有效。

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

希望有所帮助

Answer 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>

Chrome，Firefox上的全屏模式问题

3 个答案: