HTML代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.wrap {
margin: 0 auto;
border: 1px solid red;
text-align: center;
}
#content {
margin: 0 auto;
height: 500px;
700px;
background: #ccc;
text-align: center;
line-height: 500px;
}
/* 全屏时的样式 */
/* #content:-webkit-full-screen {
background-color: rgb(255, 255, 12);
} */
</style>
</head>
<body>
<div class="wrap">
<button id="btn">全屏</button>
<div id="content">
<h1>js控制页面的全屏展示和退出全屏显示</h1>
</div>
</div>
<script>
document.getElementById('btn').onclick = function () {
var dom = document.getElementById('content')
requestFullScreen(dom)
}
function requestFullScreen(element) {
// 兼容谷歌、火狐、IE
let requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen
if (requestMethod) {
requestMethod.call(element)
} else if (window.ActiveXObject) {
debugger
let ActiveXObject = window.ActiveXObject
var wscript = new ActiveXObject('WScript.Shell')
if (wscript !== null) {
wscript.SendKeys('{F11}')
}
}
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------
退出全屏：
// 注意，这里的document就是文档中的document，不能修改，也就是直接复制下面的代码就能退出全屏
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen
if (exitFullScreen) {
exitFullScreen.call(document)
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
判断当前是否已全屏
如果element处于全屏模式则返回这个对象; 如果element当前未使用全屏模式，则返回值为null。
function isFullscreen () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}