Knowledge Rollup 05~ full-screen implementation for HTML elements

Project Practical Example: Vue combined with Bootstrap's modal frame for full screen

Html:

<div class= "Modal Fade" id= "MYMODALS1" tabindex= "-1" onkeydown= "KeyListener (event)" >
<!--window Declaration--
<div class= "Modal-dialog" >
<!--content Declaration--
<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 ' > Refresh </button>
<a class= "btn btn-primary" @click = "sautof5s" > Turn off automatic refresh </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" > Exit </button>
</div>
</div>
</div>
</div>

JS Code:

Initializes a constructor function,

Let Fullscreen=function (Elem) {
This.elem=document.queryselector (Elem);
}
Constructors add full-screen functions for compatibility with different browsers
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 ();
}
}
Constructor add exit full-screen function for compatibility with different browsers to make processing
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 ();
}
}

For different browsers to monitor full-screen events,
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 (' Full Screen ')
}else{
Fullscreenenabled=true;
Closefulls=true;
$ ("#logInfos"). CSS ("height", "400px");
$ ("#logInfo"). CSS ("height", "400px");
$ ("#sfooter"). Show ();
Console.log ("Exit full Screen")
$ (' #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 (' Full Screen ')
}else{
Fullscreenenabled=true;
Closefulls=true;
$ ("#sfooter"). Show ();
$ ("#logInfos"). CSS ("height", "400px");
$ ("#logInfo"). CSS ("height", "400px");
Console.log ("Exit full Screen")
$ (' #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 (' Full Screen ')
}else{
Fullscreenenabled=true;
Closefulls=true;
$ ("#logInfos"). CSS ("height", "400px");
$ ("#logInfo"). CSS ("height", "400px");
$ ("#sfooter"). Show ();
Console.log ("Exit full Screen")
$ (' #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 (' Full Screen ')
}else{
Fullscreenenabled=true;
Closefulls=true;
$ ("#logInfos"). CSS ("height", "400px");
$ ("#sfooter"). Show ();
Console.log ("Exit full Screen")
$ (' #fullclick span '). Removeclass ("Glyphicon-resize-small"). AddClass ("Glyphicon-resize-full");
$ (' #contentFull '). CSS (' right ', ' 200px ');
$ (' #contentFullts '). CSS (' right ', ' 200px ');
}
});

The Click event out function of full screen button and close Full Screen button

function Modalfullscreens () {//applogs fullscreen
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 () {//Full screen button 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");
}

}

Monitor the keyboard ESC press the event to do the appropriate processing

function KeyListener (e) {//keyboard ESC pressed
if (e.keycode== "27") {
Clearinterval (Timeset);
Alert ("You pressed 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 ();
}
}

Summary: Realize full-screen main focus on three points, open full screen, close fullscreen, ESC off full screen, according to the needs of the corresponding function processing can be

Knowledge Rollup 05~ full-screen implementation for HTML elements