首先呢,大家应该都知道F11使屏幕全屏,但是我们也可以使用代码让用户点击全屏按钮来实现全屏效果
当然,除去F11,就要通过触发事件来使屏幕全屏,这里就用最经常的点击事件来做实例:
<!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()">我是全屏快点我</button>
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
<h1>全屏和退出全屏</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(); // IE11
}
}
}
// 退出全屏
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>