今天看到一个好玩的功能，将网页全屏，之前一直都觉得挺麻烦的，到网上搜索之后发现挺好用的，其实实现逻辑还挺简单的，简单记录下来备用。
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>全屏不全屏</title>
</head>
<body>
<button id="fullScreen">全屏模式</button>
<button id="noFullScreen">取消全屏</button>
</body>
</html>
<script>
document.getElementById("fullScreen").onclick=function(){
if(document.documentElement.RequestFullScreen){
document.documentElement.RequestFullScreen();
}
//兼容火狐
console.log(document.documentElement.mozRequestFullScreen)
if(document.documentElement.mozRequestFullScreen){
document.documentElement.mozRequestFullScreen();
}
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
if(document.documentElement.webkitRequestFullScreen){
document.documentElement.webkitRequestFullScreen();
}
//兼容IE,只能写msRequestFullscreen
if(document.documentElement.msRequestFullscreen){
document.documentElement.msRequestFullscreen();
}
}
document.getElementById("noFullScreen").onclick=function(){
if(document.exitFullScreen){
document.exitFullscreen()
}
//兼容火狐
console.log(document.mozExitFullScreen)
if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}
//兼容谷歌等
if(document.webkitExitFullscreen){
document.webkitExitFullscreen()
}
//兼容IE
if(document.msExitFullscreen){
document.msExitFullscreen()
}
}
</script>
原创文章，作者：，如若转载，请注明出处：https://blog.ytso.com/tech/webdev/275222.html