项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。主要代码如下:
显示全屏:
var docElm = document.documentElement;
if (docElm.requestFullscreen) {//W3C
docElm.requestFullscreen();
} else if (docElm.msRequestFullscreen) {//FireFox
docElm = document.body; //overwrite the element (for IE)
docElm.msRequestFullscreen();
} else if (docElm.mozRequestFullScreen) {//Chrome等
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {//IE11
docElm.webkitRequestFullScreen();
}
退出全屏:
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
事件监听:
(在显示全屏之后,用户点击Ecs键,会响应该方法)
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreenElement) ? "是" : "不是 ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement) ? "是" : "不是 ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen) ? "是" : "不是 ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "是" : "不是 ";
}, false);
下面是完整代码,可以将下面的代码全部拷贝,自己在本地实现一下吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏展示</title>
</head>
<body>
<div class="content">
<p>
<button id="view-fullscreen">显示全屏</button>
<button id="cancel-fullscreen">退出全屏</button>
</p>
<p>Fullscreen state:我现在 <b id="fullscreen-state">不是 </b>全屏</p>
</div>
</body>
<script>
(function () {
//全屏
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {//W3C
docElm.requestFullscreen();
} else if (docElm.msRequestFullscreen) {//FireFox
docElm = document.body; //overwrite the element (for IE)
docElm.msRequestFullscreen();
} else if (docElm.mozRequestFullScreen) {//Chrome等
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {//IE11
docElm.webkitRequestFullScreen();
}
}, false);
}
//退出全屏
var cancelFullScreen = document.getElementById("cancel-fullscreen");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
// 事件监听
var fullscreenState = document.getElementById("fullscreen-state");
if (fullscreenState) {
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreenElement) ? "是" : "不是 ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement) ? "是" : "不是 ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen) ? "是" : "不是 ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "是" : "不是 ";
}, false);
}
})();
</script>
</html>
页面显示如下: