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

最新推荐文章于 2024-01-04 10:16:02 发布

徊忆羽菲

最新推荐文章于 2024-01-04 10:16:02 发布

阅读量770

点赞数

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/122318171

版权

Html 同时被 3 个专栏收录

254 篇文章 9 订阅

订阅专栏

Javascript

235 篇文章 6 订阅

订阅专栏

Jquery

192 篇文章 2 订阅

订阅专栏

html5全屏效果和全屏后无法用keypress或keydown监听到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;');
        }
    }