javascript full screen method to display page elements in full screen_javascript skills

WBOY

Release： 2016-05-16 17:21:15

Original

1963 people have browsed it

One of the simplest ways is to dynamically change the style of the component you want to display in full screen. For example, position becomes absolute, height and width are set to the window size, and the background color is changed to all white (in order to cover it) the rest of the elements on the page). In this way, only the components you want to highlight can be seen on the web page, which is visually equivalent to full screen. At the same time, JavaScript is used to monitor keyboard events. Once the user presses the ESc exit key, it returns to its original state. Part of the code is as follows:

Copy code The code is as follows:

document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 27) { //ESC key

$(' .navbar-inner').fadeIn(100);
var maintable = document.getElementById("holder");
maintable.style.position = "relative";
maintable.style.height = " 100%";
maintable.style.width = "100%";
maintable = document.getElementById("main"); maintable.style.height = "100%";
maintable .style.width = "100%";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
resizePlots();
}
};

fullScreenClick: function () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");

maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style .zIndex = 5;
maintable.style.height = $(window).height() "px";
maintable.style.width = $(window).width() "px";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
maintable = document.getElementById("main");
maintable.style.height = "90 %";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 "px";
maintable.style.top = $ (window).height() * 0.02 "px";
resizePlots();
},

But this has the disadvantage that you still need to manually press F11 to achieve it True full screen.
Here is a way to avoid pressing F11 yourself:

Copy code The code is as follows:

Welcome to follow each other on Weibo!

weibo.com/leavingseason

Believe in music, believe in Mayday

This can support most browsers. But the annoying IE still cannot support the full-screen function of HTML5 and needs to simulate the action of pressing F11. Readers can see it in the code.

You can also exit the full-screen interface in the code:

Copy code The code is as follows:

function cancelFullScreen(el) {
 var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
                                                } else if ( typeof window.ActiveXObject !== "undefined") { // Older IE.
 var wscript = new ActiveXObject("WScript.Shell");
 if (wscript !== null) {
 var wscript. SendKeys("{F11}");
                                                                                                                                                                                        All devices are compatible with full screen functionality. If anyone knows, please share it, I would be very grateful. 


 updated (2013/09/22)


Many times, I want to do some custom things when switching to full screen. Events can be bound as follows: 

Copy code

The code is as follows:

document.addEventListener("fullscreenchange", function () { doit();}, false);document.addEventListener("mozfullscreenchange", function () {

doit();

}, false);

document.addEventListener("webkitfullscreenchange", function () {
 doit();
}, false);


It will enter or exit full screen every time When, the doit() operation is triggered. 