js实现进入全屏与退出

理想：

类型	名称	作用
属性	fullscreenElement	当前处于全屏模式的DOM元素
属性	fullscreenEnabled	当前 document 是否进入了可以请求全屏模式的状态
方法	requestFullscreen()	请求进入全屏模式
方法	exitFullscreen()	退出全屏模式
事件	fullscreenchange	进入/退出全屏模式切换时会触发
事件	fullscreenerror	进入/退出全屏模式失败时会触发

现实：html5的全屏api处于一个杂乱状态，各个浏览器还是有着不同的实现方法

1.获取当前处于全屏模式的元素(注意screen的大小写)，非全屏时为undefined

var ele=
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;

2.当前 document 是否进入了可以请求全屏模式的状态，我们常见的写法如下，

注意下面写法是错误的！

var isFull =
document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;

原因，msFullscreenEnabled指的并不是浏览器是否处于全屏状态，引用微软官方一句话

Returns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false.
返回当前元素是否可以已全屏展示

可以看出，它的作用并不是当前元素“是否”处于全屏状态，而是是否有能力变成全屏，所以判断当前是否全屏可以通过获取当前全屏元素来判断

3.跨浏览器进入全屏

function requestFullScreen(element) {
            if (!element) {
                element = document.body;                
            }
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
        }

4.跨浏览器退出全屏

function exitFullScreen() {
            if (document.cancelFullScreen) {
                document.cancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen()
            }
        }

4.全屏状态变化事件监听

• fullscreenchange
• webkitfullscreenchange
• mozfullscreenchange
• MSFullscreenChange

5.全屏error事件监听

• fullscreenerror
• webkitfullscreenerror
• mozfullscreenerror
• MSFullscreenError

6.关于样式

chrome：元素居中
其他：

position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;

可通过以下方式覆盖样式

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

最后上一个demo链接
https://laincarl.github.io/demos/fullscreen/