前端全屏问题汇总

前言

前段开发大部分的时间都是处理突破各个技术难点，每个公司业务场景不同，对前端某项技术的使用可能都会有差异，本文主要是总结了前端的全屏问题，这都是之前做项目的过程中遇到的坑，希望做个总结，大家也能少踩坑。

目录

1. 兼容性如何
2. 常见实现方式
3. 样式问题如何统一
4. 如何监听全屏和监听退出全屏

兼容性

如果你还需要兼容IE9及以下，全屏你用不了，放弃吧！ IE9调试的时候你会发现elem.msRequestFullscreen() 这个方法不支持
如果你想针对低版本的IE使用如下方式

var wscript = new ActiveXObject("WScript.Shell");
                                if (wscript != null) {
                                    wscript.SendKeys("{F11}");
                                }

这种貌似没有效果，如果有效果，麻烦告知，谢谢！

常用的实现方式

兼容性写法

/**
 * 标准化 requestFullscreen 方法
 * @param {DOM} elem 要全屏显示的元素(webkit下只要是DOM即可，Firefox下必须是文档中的DOM元素)
 */
function requestFullscreen( elem ) {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    }
    else if (elem.webkitRequestFullScreen) {
        // 对 Chrome 特殊处理，
        // 参数 Element.ALLOW_KEYBOARD_INPUT 使全屏状态中可以键盘输入。
        if ( window.navigator.userAgent.toUpperCase().indexOf( 'CHROME' ) >= 0 ) {
            elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
        }
        // Safari 浏览器中，如果方法内有参数，则 Fullscreen 功能不可用。
        else {
            elem.webkitRequestFullScreen();
        }
    }
    else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    }
}

可以copy直接用，没有任何问题

样式问题如何统一

/* 全屏样式 统一 兼容性问题 */
:not(:root):-webkit-full-screen {
    /* background: #fff !important; */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
}

:not(:root):-ms-full-screen {
    /* background: #fff !important; */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
}

:not(:root):-moz-full-screen {
    /* background: #fff !important; */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
}

:not(:root):fullscreen {
    /* background: #fff !important; */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
}

:not(:root):-webkit-full-screen::backdrop {
    background: #fff !important;
}

需要什么背景自己都可以定义

如何监听全屏和监听退出全屏

很多场景下需要自定义全屏时的样式，但是退出全屏需要恢复原先的样式，一般的做法是：全屏时添加一个class样式类控制全屏样式，退出时，删除这个样式类

监听全屏很简单
如何监听退出全屏呢？

/* 如果使用 jQuery ： */
$( document ).bind(
    'fullscreenchange webkitfullscreenchange mozfullscreenchange',
    function(){
        // 可以在这里添加监听全屏的方法

    }
);

这个方法在IE下有兼容性问题
IE fullscreenchange 无效，所以添加了resize方法 来判断ie的退出全屏事件，使用一下判断

window.onresize = function() {
    // ie使用这个来判断
    if(!!window.ActiveXObject || "ActiveXObject" in window){
        var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
        if(!fullScreen) {
            // 退出全屏后执行这里
        } else {
            // 开启全屏时执行这里
        }
    }
    
}

基本上遇到的坑都在这里了，直接可以用，有问题可以在留言区评论