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

项目实战实例: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关闭全屏,根据需要作相应函数处理就可以了

原文地址:https://www.cnblogs.com/sunshineForFuture/p/9353661.html

时间: 2024-10-05 04:27:42

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

AmazeUI 点击元素显示全屏

无论是点击图片还是按钮来显示全屏,具体代码如下: 点击按钮: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> <script ty

Java 必看的 Spring 知识汇总!有比这更全的算我输!

往 期 精 彩 推 荐    [1]Java Web技术经验总结 [2]15个顶级Java多线程面试题及答案,快来看看吧 [3]面试官最喜欢问的十道java面试题 [4]从零讲JAVA ,给你一条清晰地学习道路!该学什么就学什么!! [5]福利:100G Java全套学习视频免费送了 Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅仅限于服务器端的开发.从简单性.可测试性和松耦合性的角度而言

HTML5 全屏特性

全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API // 元素请求全屏显示 element.requestFullscreen() // 检测文档的当前状态是否允许执行全屏操作 document.fullscreenEnabled() //当前显示的元素是否处于全屏状态,如果处于,则返回为非空对象,否则返回null document.fullscre

Fullscreen API 全屏显示网页

第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性.因为尚未发布正式版的标准,所以必须使用浏览器特定的方法,也就是应用添加前缀(webit/moz)的方法. 这个 API 不仅能够使整个页面全屏显示,也可以使页面中的某个元素全屏显示.它的设计初衷是为了全屏显示 HTML5 视频和游戏,以便更全面的替代 flash 功能.尽管还有很多有待完善的地方,

使用javascript实现浏览器全屏

HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做 全屏API,游戏呀,等都很有用.先看常见的API 1 element.requestFullScreen() 作用:请求某个元素element全屏 2 Document.getElementById(“myCanvas”).requestFullScreen() 这里是将其中的元素ID去请求fullscreen 3 退出全屏   document.cancelFullScreen() 4 Do

JS 全屏代码

// 推断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkit

html5实现全屏的api方法

参考地址 [进入和退出全屏] // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); // Firefox 10 element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C 提议 element.requestFullscreen(); doc

android 实现全屏代码

设置全屏包括两个部分: 窗口全屏和Activity全屏. 窗口全屏 是指隐藏系统顶部用来显示时间.电量.信号等信息的标题栏 . Activity全屏 是指隐藏程序的标题栏.我们可以通过修改AndroidManifest.xml文件来实现. 1.窗口全屏fullscreen.java代码如下: package wzhnsc.test.style;import android.app.Activity;import android.os.Bundle;import android.view.Wind

[安卓]Android 设置窗口全屏

转自:http://blog.sina.com.cn/s/blog_4c451e0e010133ab.html 设置全屏包括两个部分: 窗口全屏和Activity全屏.窗口全屏是指隐藏系统顶部用来显示时间.电量.信号等信息的标题栏:Activity全屏是指隐藏程序的标题栏.我们可以通过修改AndroidManifest.xml文件来实现. 1.窗口全屏fullscreen.java代码如下: package wzhnsc.test.style; import android.app.Activi