html5全屏效果和全屏后无法用keypress或keydown监听到Esc按键解决方案

html5全屏效果和全屏后无法用keypress或keydown监听到Esc按键解决方案

• • 全屏代码
  • 判断是否全屏
  • 监听窗口退出全屏解决无法监听Esc按键

全屏代码

 //定义一个变量进行判断，默认false 非全屏状态
    let exitFullscreen = false;

    // 全屏事件
    function handleFullScreen() {
        let element = document.documentElement;
        //判断 是否全屏
        let is_full_screen = getFullScreen();
        console.log('is_full_screen===', is_full_screen);
        if (is_full_screen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            //显示
            $('#slider-quanping').attr('style', 'display:block;');
        } else {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
            //隐藏
            $('#slider-quanping').attr('style', 'display:none;');
        }


    }

判断是否全屏

    function getFullScreen() {
        /*两个细节：使用document判断  能力测试*/
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
            return true;
        } else {
            return false;
        }
    }

监听窗口退出全屏解决无法监听Esc按键

    window.onresize = function () {
        if (!getFullScreen()) {
            //要执行的动作
            //显示
            $('#slider-quanping').attr('style', 'display:block;');
        }
    }