参考：https://www.jb51.net/article/170208.htm
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#content:-webkit-full-screen {
background-color: rgb(255, 255, 12);
}
#btn{
position: absolute;top: 0;left: 0;height: 50px;
}
</style>
<body>
<div style="margin:0 auto;height:600px;width:700px;" id="qp">
<button id="btn">开启/关闭全屏</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;">
<h1>js控制页面的全屏展示和退出全屏显示</h1>
</div>
</div>
</body>
<script language="JavaScript">
var flag = true;
document.getElementById("btn").onclick = function() {
var elem = document.getElementById("qp");
if(flag) {
launchFullscreen(elem)
flag = false
}else{
exitFullscreen()
flag = true
}
};
// 进入全屏
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
</script>
</html>
