js实现⽹页全屏
⽼师布置的作业需要完成⽹页全屏的操作。⼤概效果是点击按钮全屏，⽹页全屏并显⽰“退出全屏”按钮，再点击按钮退出全屏，并显⽰“全屏”按钮。
部分html代码如下：
<button id="fullScreenButton" class="left-line" >
<div class="maptp">
全屏
</div>
</button>
<button id="exitFullScreenButton" class="left-line"  >
<div class="maptp">
退出全屏
js arguments</div>
</button>
js代码：
$("#fullScreenButton").on("click",function(event){//全屏效果
event.preventDefault();
event.stopPropagation();
// Trigger fullscreen
if (questFullscreen) { //解决兼容性问题
questFullscreen();
$("#fullScreenButton").css("display","none");//按钮显⽰调整
$("#exitFullScreenButton").show();
} else if (document.body.webkitRequestFullScreen) { //兼容⾕歌 /Edge
document.body.webkitRequestFullScreen();
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
} else if (RequestFullScreen) { //Firefox
RequestFullScreen();
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
}else if(document.body.msRequestFullscreen){//ie
document.body.msRequestFullscreen();
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
}
else {
alert("浏览器不兼容");
}
});
//退出全屏模式
$("#exitFullScreenButton").on("click",function(event){
itFullscreen) {
$("#exitFullScreenButton").css("display","none");
$("#fullScreenButton").show();
} else CancelFullScreen) {
$("#exitFullScreenButton").css("display","none");
$("#fullScreenButton").show();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
$("#exitFullScreenButton").css("display","none");
$("#fullScreenButton").show();
}else if(document.msExitFullscreen) {
document.msExitFullscreen();
$("#exitFullScreenButton").css("display","none");
$("#fullScreenButton").show();
}else {
alert("浏览器不兼容");
}
});
初步实现了全屏效果，但是按f11或esc退出全屏时按钮不会切换。
刚开始我的解决思路是监听onkeydown事件通过keyCode可以知道⽤户按下了esc或f11，再判断是否处于全屏状态来改变按钮的显⽰。但是发现按f11或esc退出全屏时浏览器并不会监听onkeydown事件，原因是为了防⽌恶意全屏，全屏时浏览器不监听按f11或esc，直接由操作系统执⾏。在⽹上到了两个解决办法，⼀个是监听onresize事件，⼀个是监听onfullscreenchange事件，代码如下：
//解决办法 1.监听onresize
if(
//判断是否全屏
document.webkitFullscreenElement||
document.msFullscreenElement
){
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
}
else{
$("#exitFullScreenButton").css("display","none");
$("#fullScreenButton").show();
}
};
//解决办法 2.监听fullscreenchange
if(document.webkitFullscreenElement||
document.msFullscreenElement){
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
}
else{
$("#exitFullScreenButton").css("display","none");
$("#fullScreenButton").show();
}
}
但是不知道为什么按f11全屏时判断结果为⾮全屏，再加上这段就解决了
var e = event || window.event || arguments.callee.caller.arguments[0];            if(e && e.keyCode==122){ // 按 F11
e.preventDefault();//阻⽌默认事件
e.stopPropagation();
if (questFullscreen) { //解决兼容性问题
questFullscreen();
$("#fullScreenButton").css("display","none");//按钮显⽰调整
$("#exitFullScreenButton").show();
} else if (document.body.webkitRequestFullScreen) { //兼容⾕歌 /Edge                document.body.webkitRequestFullScreen();
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
} else if (RequestFullScreen) { //Firefox
RequestFullScreen();
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
}else if(document.body.msRequestFullscreen){//ie
document.body.msRequestFullscreen();
$("#fullScreenButton").css("display","none");
$("#exitFullScreenButton").show();
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。