html 全屏不允许 退出,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 { }