js 实现全屏、退出全屏功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#content:-webkit-full-screen {
background-color:rgb(255, 255, 12);
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="margin:0 auto;height:600px;width:700px;">
<button id="btn" onclick="btnClick()">js控制div的全屏展示和退出全屏显示</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
<h1>js控制页面的全屏展示和退出全屏显示</h1>
</div>
<script>
function btnClick(){
var element= document.getElementById("content");
if (this.isFullscreen()) {
exitFullScreen();
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
}
function exitFullScreen () {
let exitFullScreen = document.exitFullScreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
function isFullscreen () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
</script>
</body>
</html>