核心代码
//全屏
function fullScreen() {
// const rootElement = document.documentElement; //若要全屏页面div
const element = document.querySelector(".fullScreen_panorama");
//IE 10及以下ActiveXObject
if (window.ActiveXObject) {
const WsShell = new ActiveXObject('WScript.Shell');
WsShell.SendKeys('{F11}');
//写全屏后的执行函数
}
//HTML W3C 提议
else if (element.requestFullScreen) {
element.requestFullScreen();
//写全屏后的执行函数
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
//写全屏后的执行函数
}
// Webkit (works in Safari5.1 and Chrome 15)
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
//写全屏后的执行函数
}
// Firefox (works in nightly)
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
//写全屏后的执行函数
} else {
alert("此设备不支持 Fullscreen API")
}
}
//退出全屏
function fullExit() {
//const rootElement= document.documentElement;//若要全屏页面中
const element = document.querySelector(".fullScreen_panorama");
//IE ActiveXObject
if (window.ActiveXObject) {
const WsShell = new ActiveXObject('WScript.Shell');
WsShell.SendKeys('{F11}');
//写退出全屏后的执行函数
}
//HTML5 W3C 提议
else if (element.requestFullScreen) {
document.exitFullscreen();
//写退出全屏后的执行函数
}
//IE 11
else if (element.msRequestFullscreen) {
document.msExitFullscreen();
//写退出全屏后的执行函数
}
// Webkit (works in Safari5.1 and Chrome 15)
else if (element.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
//写退出全屏后的执行函数
}
// Firefox (works in nightly)
else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
//写退出全屏后的执行函数
}
}
全部代码
<!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>
.fullScreen_panorama {
background-color: #dcdcdc;
width: 100%;
height: 20vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="fullScreen_panorama">
<button onclick="fullScreen()">全屏</button>
<button onclick="fullExit()">退出全屏</button>
</div>
</body>
<script>
//全屏
function fullScreen() {
// const rootElement = document.documentElement; //若要全屏页面div
const element = document.querySelector(".fullScreen_panorama");
//IE 10及以下ActiveXObject
if (window.ActiveXObject) {
const WsShell = new ActiveXObject('WScript.Shell');
WsShell.SendKeys('{F11}');
//写全屏后的执行函数
}
//HTML W3C 提议
else if (element.requestFullScreen) {
element.requestFullScreen();
//写全屏后的执行函数
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
//写全屏后的执行函数
}
// Webkit (works in Safari5.1 and Chrome 15)
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
//写全屏后的执行函数
}
// Firefox (works in nightly)
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
//写全屏后的执行函数
} else {
alert("此设备不支持 Fullscreen API")
}
}
//退出全屏
function fullExit() {
//const rootElement= document.documentElement;//若要全屏页面中
const element = document.querySelector(".fullScreen_panorama");
//IE ActiveXObject
if (window.ActiveXObject) {
const WsShell = new ActiveXObject('WScript.Shell');
WsShell.SendKeys('{F11}');
//写退出全屏后的执行函数
}
//HTML5 W3C 提议
else if (element.requestFullScreen) {
document.exitFullscreen();
//写退出全屏后的执行函数
}
//IE 11
else if (element.msRequestFullscreen) {
document.msExitFullscreen();
//写退出全屏后的执行函数
}
// Webkit (works in Safari5.1 and Chrome 15)
else if (element.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
//写退出全屏后的执行函数
}
// Firefox (works in nightly)
else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
//写退出全屏后的执行函数
}
}
</script>
</html>
