<div class="">
<div class="***" id="fullScreen" onclick="handleFullScreen()">
<img src="../../*******" alt="" style="width: 20px;height: 20px;">
<span>全屏</span>
</div>
<div class="***" id="ExitfullScreen" onclick="exitFullscreen()" style="display: none">
<img src="../../*******" alt="" style="width: 20px;height: 20px;">
<span>退出全屏</span>
</div>
<div class="***" id="close" onclick="">
<img src="../../*******" alt="" style="width: 20px;height: 20px;">
<span>关闭</span>
</div>
</div>
/**
* 设置页面点击全屏、点击退出全屏
* **/
//定义一个变量进行判断,默认false 非全屏状态
var exitFullscreen = false
// 点击全屏
function handleFullScreen() {
var element = document.documentElement;
if(this.fullscreen) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
}
// 点击退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
//监听window是否全屏,并进行相应的操作,支持esc键退出
window.onresize = function() {
//这样写也是对的
// const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
const isFullScreen = document.fullscreenElement
if (isFullScreen) {
$("#ExitfullScreen").css("display","flex");
$("#fullScreen").css("display","none");
console.log('进入全屏')
} else {
$("#ExitfullScreen").css("display","none");
$("#fullScreen").css("display","flex");
console.log('退出全屏')
}
}