fullscreen
为啥不好用？因为兼容性贼差，但是后续肯定会改动的，所以现在记录下来先：
http://caniuse.com/#search=FullScreen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html:-moz-full-screen {background: red;}
html:-webkit-full-screen {background: red;}
html:fullscreen {background: red;}
</style>
</head>
<body>
<button οnclick="launchFullScreen()">全屏</button>
<input />
<button οnclick="exitFullscreen()">退出全屏</button>
<script>
// 找到支持的方法, 使用需要全屏的 element 调用
function launchFullScreen(element) {
var element=element||document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//离开全屏模式
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);//全屏状态允许键盘输入
document.addeventlistener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
</script>
</body>
</html>
文章最后发布于: 2017-09-19 10:16:51