默认状态
内容全屏
页面全屏
styles
html{
background-color:seagreen}
body{
position:absolute;width:100%;height:100%;margin:0;background-color:salmon;overflow:hidden}
.wrap{
position:absolute;width:500px;height:500px;left:50%;top:50%;transform:translate(-50%,-50%)}
#box{
position:relative;width:100%;height:100%;background-color:slateblue}
#fullscreen{
position:absolute;top:0;right:0;padding:0 12px}
#fullscreen::after{
content:"全屏";cursor:pointer}
#fullscreen.active::after{
content:"退出全屏"}
html
<body>
<div class="wrap">
<div id="box">
<div id="fullscreen"></div>
</div>
</div>
<body>
js
//捕捉屏幕
document.addEventListener ("fullscreenchange", FShandler);
document.addEventListener ("webkitfullscreenchange", FShandler);
document.addEventListener ("mozfullscreenchange", FShandler);
document.addEventListener ("MSFullscreenChange", FShandler);
//全屏
function requestFullScreen() {
// var element = document.getElementsByTagName("body")[0]; // 整个页面全屏
var element = document.querySelector("#box"); // 某块内容全屏
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFullScreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
el.mozCancelFullScreen || el.exitFullScreen;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
//捕捉屏幕变化，改变按钮状态
function FShandler() {
var btn = document.querySelector('#fullscreen');
btn.classList.toggle('active')
}
// 调用
var btn = document.querySelector('#fullscreen');
btn.onclick = function(){
if(btn.classList.contains("active")){
exitFullScreen();
}else{
requestFullScreen();
}
}