全屏API
H5有一个全屏API，Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
需要注意的是：只有包含在顶层文档内部的标准HTML元素、svg元素和math元素，以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素，以及object的内部元素不能进入全屏模式。
全屏事件
如果元素被允许进入全屏模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
全屏样式
全屏之后还可以选择性的调整样式，就和hover一样，如下所示：
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
示例代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>全屏不全屏</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100%;
height: 400px;
border: 1px solid purple;
}
</style>
</head>
<body>
<button id="fullScreen">全屏模式</button>
<button id="noFullScreen">取消全屏</button>
<pre id="box">
注意:
全屏方法xxRequestFullScreen()是需要全屏元素的方法
取消全屏xxExitFullscreen()是document的方法
</pre>
</body>
</html>
<script>
document.getElementById("fullScreen").onclick = function () {
// 某个元素全屏
// let eleDom = document.getElementById('box')
// 整个html全屏
let eleDom = document.getElementsByTagName('html')[0]
if (eleDom.RequestFullScreen) {
eleDom.RequestFullScreen();
}
//兼容火狐
if (eleDom.mozRequestFullScreen) {
eleDom.mozRequestFullScreen();
}
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
if (eleDom.webkitRequestFullScreen) {
console.log(eleDom.webkitRequestFullScreen)
eleDom.webkitRequestFullScreen();
}
//兼容IE,只能写msRequestFullscreen
if (eleDom.msRequestFullscreen) {
eleDom.msRequestFullscreen();
}
}
document.getElementById("noFullScreen").onclick = function () {
if (document.exitFullScreen) {
document.exitFullscreen()
}
//兼容火狐
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
//兼容谷歌等
if (document.webkitExitFullscreen) {
debugger
console.log(document.webkitExitFullscreen)
document.webkitExitFullscreen()
}
//兼容IE
if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
console.log('document', document)
console.log('document.documentElement', document.documentElement)
</script>
