JavaScript全屏代码（完美解决全屏功能按钮与用户按F11冲突的问题）

css代码：

.cl {height: 100vh;width: 20px;background-color: red;position: absolute;top: 0; left: -20px;}

html代码：

<div class="cl"></div>

js代码（代码复制完后直接调用isFullscreen()代码即可））：

let clHeight=$(".cl").height();
  // 全屏
function enterFullscreen() {
    var docElm = document.documentElement;
    //W3C
    if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //FireFox
    else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
    //Chrome等
    else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //IE11
    else if(docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
}
function exitFullscreen() {
    //W3C
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    //FireFox
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    //Chrome等
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    //IE11
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}
function isFullscreen() {
  let height=$(".cl").height();
  if(clHeight==height){
    enterFullscreen()
  }else{
    exitFullscreen()
  }
}
  // 解决用户按F11全屏问题
  $(document).on("keydown", function (e) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode == 122) {
        //捕捉F11键盘动作
        e.preventDefault(); //阻止F11默认动作
        var el = document.documentElement;
        var rfs =
            el.requestFullScreen ||
            el.webkitRequestFullScreen ||
            el.mozRequestFullScreen ||
            el.msRequestFullScreen; //定义不同浏览器的全屏API //执行全屏
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }

        const weListenScreen = function () {
            if (document.webkitIsFullScreen) {
                //全屏后要执行的代码
            } else {
                //退出全屏后执行的代码
                document.removeEventListener("webkitfullscreenchange",weListenScreen);
            }
        };
        const fuListenScreen = function () {
            if (document.fullscreen) {
                //全屏后要执行的代码
            } else {
                //退出全屏后执行的代码
                document.removeEventListener("fullscreenchange", fuListenScreen);
            }
        };
        const moListenScreen = function () {
            if (document.mozFullScreen) {
                //全屏后要执行的代码
            } else {
                //退出全屏后执行的代码
                document.removeEventListener("mozfullscreenchange", moListenScreen);
            }
        };
        const msListenScreen = function () {
            if (document.msFullscreenElement) {
                //全屏后要执行的代码
            } else {
                //退出全屏后执行的代码
                document.removeEventListener("msfullscreenchange", msListenScreen);
            }
        }; //监听不同浏览器的全屏事件，并件执行相应的代码
        document.addEventListener("webkitfullscreenchange",weListenScreen,false);
        document.addEventListener("fullscreenchange", fuListenScreen, false);
        document.addEventListener("mozfullscreenchange", moListenScreen, false);
        document.addEventListener("msfullscreenchange", msListenScreen, false);
    }
  });