知识汇总05~针对html元素的全屏实现

Posted 2020-12-24 sunshineforfuture

项目实战实例：vue结合bootstrap的modal弹框实现全屏

html：

<div class="modal fade" id="myModals1" tabindex="-1" onKeyDown="keylistener(event)">
<!-- 窗口声明 -->
<div class="modal-dialog">
<!-- 内容声明 -->
<div class="modal-content" style=‘min-width:1000px;right:200px‘ id=‘contentFull‘>
<div class="modal-header">

<div class=‘container-fluid‘>
<div class=‘row‘ style=‘border-top:0px solid red‘>
<div class=‘form-inline‘>
<button class=‘btn btn-default‘ id=‘fullclick‘ onclick="modalFullscreen()" style=‘float:right;margin-top:-20px;margin-right:-20px‘><span class=‘glyphicon glyphicon-resize-full‘></span></button>
<div class="btn-group " style=‘float:left‘>
<div class="dropdown btn-group " id="dropdowns" style="float:left">

<button class="btn btn-primary" data-toggle="dropdown" data-target="#dropdowns" id="autoS">
<span>5s</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="amenu">
<li class=‘active‘><a href="javascript:void(0)" onclick="autoF5(this.innerHTML,0,5000)">5s</a></li>
<li><a href="javascript:void(0)" onclick="autoF5(this.innerHTML,1,10000)">10s</a></li>
<li><a href="javascript:void(0)" onclick="autoF5(this.innerHTML,2,30000)">30s</a></li>
</ul>
</div>
<button class="btn btn-primary" onclick="shuaxinNews()" id=‘shuaxins‘>刷新</button>
<a class="btn btn-primary" @click="sautoF5s">关闭自动刷新</a>
</div>
</div>

</div>
</div>
</div>
<div class="modal-body" style=‘color:white;height:400px;overflow:auto‘ id=‘logInfos‘>

</div>
<div class="modal-footer" id=‘sfooter‘>
<button class=‘btn btn-default ‘ @click="takeOffLogs">退出</button>
</div>
</div>
</div>
</div>

---

 

js代码：

//初始化一个构造函数，

let FullScreen=function(elem){
this.elem=document.querySelector(elem);
}
//构造函数添加全屏函数，针对不同浏览器的兼容做出处理
FullScreen.prototype.in=function(){
if(this.elem.requestFullscreen){
this.elem.requestFullscreen();
}else if(this.elem.webkitRequestFullscreen){
this.elem.webkitRequestFullscreen();
}else if(this.elem.mozRequestFullscreen){
this.elem.mozRequestFullscreen();
}else if(this.elem.msRequestFullscreen){
this.elem.msRequestFullscreen();
}
}
//构造函数添加退出全屏函数，针对不同浏览器的兼容做出处理
FullScreen.prototype.out=function(){
if(document.exitFullscreen){
document.exitFullscreen();
}else if(document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else if(document.mozCancelFullscreen){
document.mozCancelFullscreen();
}else if(document.msExitFullscreen){
document.msExitFullscreen();
}
}

---

 

//针对不同浏览器对全屏事件的监听，
　　document.addEventListener("fullscreenchange", function(e) {
　　// console.log("fullscreenchange", e);
　　if(fullscreenEnabled){
　　fullscreenEnabled=false;
　　closeFulls=false;

　　$(‘#fullclick span‘).removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");　　
　　$(‘#contentFull‘).css(‘right‘, ‘0px‘);
　　$(‘#contentFullts‘).css(‘right‘, ‘0px‘);
　　$("#logInfos").css({"height":"88%","overflow":"auto"});
　　$("#logInfo").css({"height":"88%","overflow":"auto"});

　　//console.log(‘全屏了‘)
　　}else{
　　fullscreenEnabled=true;
　　closeFulls=true;
$("#logInfos").css("height", "400px");
$("#logInfo").css("height", "400px");
$("#sfooter").show();
//console.log("退出全屏了")
$(‘#fullclick span‘).removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
$(‘#contentFull‘).css(‘right‘, ‘200px‘);
$(‘#contentFullts‘).css(‘right‘, ‘200px‘);
}
});
document.addEventListener("mozfullscreenchange", function(e) {
// console.log("mozfullscreenchange ", e);
if(fullscreenEnabled){
fullscreenEnabled=false;
closeFulls=false;
$(‘#fullclick span‘).removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
$(‘#contentFull‘).css(‘right‘, ‘0px‘);
$(‘#contentFullts‘).css(‘right‘, ‘0px‘);
$("#logInfos").css({"height":"88%","overflow":"auto"});
$("#logInfo").css({"height":"88%","overflow":"auto"});
//console.log(‘全屏了‘)
}else{
fullscreenEnabled=true;
closeFulls=true;
$("#sfooter").show();
$("#logInfos").css("height", "400px");
$("#logInfo").css("height", "400px");
//console.log("退出全屏了")
$(‘#fullclick span‘).removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
$(‘#contentFull‘).css(‘right‘, ‘200px‘);
$(‘#contentFullts‘).css(‘right‘, ‘200px‘);
}
});
document.addEventListener("webkitfullscreenchange", function(e) {
//console.log("webkitfullscreenchange", e.currentTarget.webkitlsFullScreen);
if(fullscreenEnabled){
fullscreenEnabled=false;
closeFulls=false;
$(‘#fullclick span‘).removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
$(‘#contentFull‘).css(‘right‘, ‘0px‘);
$(‘#contentFullts‘).css(‘right‘, ‘0px‘);
$("#logInfos").css({"height":"88%","overflow":"auto"});
//console.log(‘全屏了‘)
}else{
fullscreenEnabled=true;
closeFulls=true;
$("#logInfos").css("height", "400px");
$("#logInfo").css("height", "400px");
$("#sfooter").show();
//console.log("退出全屏了")
$(‘#fullclick span‘).removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
$(‘#contentFull‘).css(‘right‘, ‘200px‘)
$(‘#contentFullts‘).css(‘right‘, ‘200px‘);
}
});
document.addEventListener("msfullscreenchange", function(e) {
//console.log("msfullscreenchange", e);
if(fullscreenEnabled){
fullscreenEnabled=false;
closeFulls=false;
$(‘#fullclick span‘).removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
$(‘#contentFull‘).css(‘right‘, ‘0px‘);
$(‘#contentFullts‘).css(‘right‘, ‘0px‘);
$("#logInfos").css({"height":"88%","overflow":"auto"});
//console.log(‘全屏了‘)
}else{
fullscreenEnabled=true;
closeFulls=true;
$("#logInfos").css("height", "400px");
$("#sfooter").show();
//console.log("退出全屏了")
$(‘#fullclick span‘).removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
$(‘#contentFull‘).css(‘right‘, ‘200px‘);
$(‘#contentFullts‘).css(‘right‘, ‘200px‘);
}
});

---

全屏按钮和关闭全屏按钮的click事件出来函数

function modalFullscreens(){//applogs全屏
if(closeFulls){
closeFulls=false;
ts=new FullScreen("#contentFullts");
$(‘#sfooter‘).hide();
ts.in();
$("#logInfo").css({"height":"88%","overflow":"auto"});
}else{
closeFulls=true;
$("#sfooter").show();
ts=new FullScreen("#contentFullts");
ts.out();
$("#logInfo").css("height", "400px");
}
}
function modalFullscreen(){//全屏按钮click
if(closeFulls){
closeFulls=false;
ts=new FullScreen("#contentFull");
$("#sfooter").hide();
ts.in();
$("#logInfos").css({"height":"88%","overflow":"auto"});
}else{
closeFulls=true;
$("#sfooter").show();
ts=new FullScreen("#contentFull");
ts.out();
$("#logInfos").css("height", "400px");
}

}

//监听键盘esc按下事件，做相应处理 

function keylistener(e){//键盘esc按下
if(e.keyCode=="27"){
clearInterval(timeset);
//alert("你按下了esc")
$("#autoS").removeClass("disabled");
$(‘#shuaxins‘).prop("disabled",false);
$("#amenu li").eq(0).addClass("active").siblings().removeClass("active");
$("#autoS span").eq(0).text("5s");
timesk=5000;
$("#myiframe").remove();
}
}

---

总结：实现全屏主要注重三点，打开全屏，关闭全屏，Esc关闭全屏，根据需要作相应函数处理就可以了