Method One: The method is from a web-based effect to see good, and then take it down to experiment with it, or relatively satisfactory degree, the following direct code
<! DOCTYPE html>(function(A, b) {"Use Strict"; varc =function() { varA = [["Requestfullscreen", "Exitfullscreen", "Fullscreenchange", "fullscreen", "fullscreenelement"], [" Webkitrequestfullscreen "," Webkitcancelfullscreen "," Webkitfullscreenchange "," Webkitisfullscreen "," Webkitcurrentfullscreenelement "], [" Mozrequestfullscreen "," Mozcancelfullscreen "," Mozfullscreenchange "," Mozfullscreen "," Mozfullscreenelement "]]; for(varc = 0, D= A.length; C < D; C++) { varE =A[c]; if(E[1]inchbreturne}} (); if(!C)returnA.screenfull =!1; varD = "Allow_keyboard_input"inchElement, E={init:function() { returnB.addeventlistener (c[2], function(a) {E.isfullscreen= B[c[3]], e.element= B[c[4], E.onchange (A)}), This}, isfullscreen:b[c[3]], element:b[c[4] ], request:function(a) {a= A | |b.documentelement, a[c[0]] (d &&element.allow_keyboard_input), B.isfullscreen|| A[c[0]](); //alert ("DD");}, Exit:function() {b[c[1]] ()}, Toggle:function(a) { This. IsFullScreen? This. Exit (): This. Request (A)}, onchange:function() {} }; A.screenfull=e.init ()}) (window, document)</script> functionck () {screenfull&&screenfull.request ();}; //Write your code here ... varLoading = document.getElementById (' Loading ')); Loading.style.cursor= ' pointer '; Loading.innerhtml= ' Click to start '; Loading.onclick=ck</script> </body>The above code is very simple, the function is mainly in the head of script scripting code---and is after I formatted the code, in the body of the code just to call.
Description: No experiment was successful when the page was opened directly full screen, do not know why must be bound to an object of the onclick event called?
The following is the first unformatted code, which should be compressed
<script type= "Text/javascript" >(function(A, B) {"Use strict";varC=function(){vara=[["Requestfullscreen", "Exitfullscreen", "Fullscreenchange", "fullscreen", "Fullscreenelement"],[" Webkitrequestfullscreen "," Webkitcancelfullscreen "," Webkitfullscreenchange "," Webkitisfullscreen "," Webkitcurrentfullscreenelement "],[" Mozrequestfullscreen "," Mozcancelfullscreen "," Mozfullscreenchange "," Mozfullscreen "," mozfullscreenelement "]; for(varc=0,d=a.length;c<d;c++) {varE=A[C];if(E[1]inchbreturne}} ();if(!C)returna.screenfull=!1;varD= "Allow_keyboard_input"inchElement,e={init:function(){returnB.addeventlistener (C[2],function(a) {E.isfullscreen=b[c[3]],e.element=b[c[4]],e.onchange (a)}), This},isfullscreen:b[c[3]],element:b[c[4]],request:function(a) {a=a| | B.documentelement,a[c[0]] (d&&element.allow_keyboard_input), b.isfullscreen| | A[c[0]] ()},exit:function() {b[c[1]] ()},toggle:function(a) { This. IsFullScreen? This. Exit (): This. Request (a)},onchange:function() {}};a.screenfull=e.init ()}) (window,document)</script>
You can use it in your own discretion.
Reference Source: http://liumeijun.com/
================================================================================
Method Two:
This method and method of a very similar, also I find from the Internet, used for a bit of effect is also good.
<! DOCTYPE html>document.getElementById ("BTN"). onclick=function(){ varElem = document.getElementById ("Content"); varH1 = document.getElementById ("H1"); Requestfullscreen (elem);//a page element //Requestfullscreen (document.documentelement);//entire Web page};functionRequestfullscreen (Element) {//judge various browsers to find the right method varRequestmethod = Element.requestfullscreen | |// theElement.webkitrequestfullscreen | |//Chrome and moreElement.mozrequestfullscreen | |//FireFoxElement.msrequestfullscreen;//IE11 if(Requestmethod) {requestmethod.call (element); } Else if(typeofWindow. ActiveXObject!== "undefined") {//For Internet Explorer varwscript =NewActiveXObject ("Wscript.Shell"); if(WScript!==NULL) {WScript. SendKeys ("{F11}"); } }}//exit Full Screen Judging browser typefunctionExitfull () {//judge various browsers to find the right method varExitmethod = Document.exitfullscreen | |// theDocument.mozcancelfullscreen | |//Chrome and moreDocument.webkitexitfullscreen | |//FireFoxDocument.webkitexitfullscreen;//IE11 if(Exitmethod) {Exitmethod.call (document); } Else if(typeofWindow. ActiveXObject!== "undefined") {//For Internet Explorer varwscript =NewActiveXObject ("Wscript.Shell"); if(WScript!==NULL) {WScript. SendKeys ("{F11}"); } }}</script>Description: No experiment was successful when the page was opened directly full screen, do not know why must be bound to an object of the onclick event called?
Reference Source:
Http://www.jb51.net/article/61940.htm
Http://www.jb51.net/article/47038.htm
Http://www.2cto.com/kf/201410/346205.html
================================================================================
Method Three: This method is a bit far-fetched, I feel actually refers to the maximization, you can try the code, and I have done some instructions
<! DOCTYPE Html>//PS: This is the realization of the screen maximization method onefunctionOpenwin_max (URL) {varScrwidth=Screen.availwidth; varscrheight=Screen.availheight; varSelf=window.open (URL, "Powerbos", "resizable=1"); Self.moveto (-4,-4); Self.resizeto (Scrwidth+9,scrheight+9);}//PS: This is the implementation window maximization method twofunctionopenwin_full (URL) {varScrwidth=Screen.availwidth; varscrheight=Screen.availheight; varOpt= ' Top=0, left=0, Toolbar=no, Menubar=no, Scrollbars=no, Resizable=no,location=no, Status=no,fullscreen=1 '; varSelf = window.open (URL, "AAAA", opt); //var self=window.open (URL, "Powerbos", "resizable=1");Self.moveto (0,0); Self.resizeto (scrwidth,scrheight);}</script><script>Window.moveto (0,0); Window.resizeto (Screen.availwidth,screen.availheight); Window.outerwidth=Screen.availwidth; Window.outerheight=Screen.availheight; //This is the implementation of screen maximization! Method Threefunctionfullscreen () {varOpt= ' Top=0, left=0, Toolbar=no, Menubar=no, Scrollbars=no, Resizable=no,location=no, Status=no '; //window.open (document.location, ' aaa ', ' fullscreen ')window.open (document.location, "AAA", opt);}</script><p style= "FONT-SIZE:16PX; Text-indent:2em; "> This page special code realizes the browser maximized full full screen </p><p style=" FONT-SIZE:16PX; Text-indent:2em; Font-weight:bold; margin-top:30px; " >Close method: Press keyboard Alt+f4 but the address bar and the Close button are still not fully displayed for Firefox. </p><p style= "FONT-SIZE:16PX; Text-indent:2em; Font-weight:bold; margin-top:30px; " >o (∩_∩) o haha~</p></body>There are many people on the Internet that want to write the method of the third way to the body of the OnLoad event can achieve the page in the time of the manned display maximization: such as <body onload= "fullscreen ();" >
I had a problem with the test:
①:window.open (document.location, ' ', ' fullscreen ') in the second argument of the method if it is empty, in the body onload event is a call to open the dead loop of the specified page, In other words, you can open a new window without restrictions, and you will be able to test it yourself and note the CPU changes in the Performance tab of your task manager.
②: If the second parameter of the Window.Open method is given, for example: window.open (document.location, ' aaa ', ' fullscreen '), it is also a dead loop when called in the OnLoad event of the body. Just the same page window, you can test it yourself and note the CPU changes in the Performance tab of your task manager.
Above the problems that appear, hope to have the interest of the friends under their own research and tell me the best solution
Reference Source:
Http://blog.sina.com.cn/s/blog_4f8f56850100c0ig.html
Http://fluagen.blog.51cto.com/146595/186101
Http://www.51xuediannao.com/js/texiao/IEquanping.html
================================================================================
Browser full-screen JS code implementation