JavaScript controls methods, properties, and events _javascript tips for full screen browsers and various browser Full-screen modes

Full screen in HTML 5 is now available in browsers other than IE and opera, and sometimes it is useful for Full-screen APIs, games, etc. See the Common API first

Element.requestfullscreen ()

Function: Request a full screen of element elements

document.getElementById ("MyCanvas"). Requestfullscreen ()

Here is the element ID to request fullscreen

Exit Full Screen

Document.cancelfullscreen ()

Document.fullscreen

Returns true if the user is in Full-screen mode

Document.fullscreenelement

Returns the element that is currently in Full-screen mode

The following code opens Full-screen mode:

function fullscreen (element) { 
  if (element.requestfullscreen) { 
  element.requestfullscreen (); 
 } else if ( Element.webkitrequestfullscreen) { 
   element.webkitrequestfullscreen (); 
  } else if ( Element.mozrequestfullscreen) { 
  element.mozrequestfullscreen (); 
 } 
 

The following code is the entire page call Full-screen mode

But to be honest, there is a problem with full screen that can easily lead to deception, such as
http://feross.org/html5-fullscreen-api-attack/, there is a good demo, to deceive, such as a link is written http://www.bankofamerica.com, We thought it was Bank of America, a bit in, because using the full screen API would deceive people

$ (' HTML '). On (' Click KeyPress ', ' a ', function (event) { 
  //Not responding to true a href click event 
 event.preventdefault (); 
  Event.stoppropagation (); 
  Trigger fullscreen 
  if (elementprototype.requestfullscreen) { 
   Document.documentElement.requestFullscreen (); 
  } else if (elementprototype.webkitrequestfullscreen) { 
   Document.documentElement.webkitRequestFullScreen ( element.allow_keyboard_input); 
  } else if (elementprototype.mozrequestfullscreen) { 
   document.documentElement.mozRequestFullScreen (); 
  } else {/ 
   / 
  } 
  //Display fake UI 
  $ (' #menu, #browser '). Show (); 
  $ (' #target-site '). Show (); 
 

Here's a description of how JavaScript controls various browser Full-screen modes, properties, and events

Browser Full-screen mode of the start function Requestfullscreen still need to accompany the browser's JS dialect prefix, I believe that the following code requires you to spend a lot of search to gather together:

The code is as follows:

Judge various browsers and find the correct method
function Launchfullscreen (element) {
 if (element.requestfullscreen) {
  Element.requestfullscreen ();
 } else if (element.mozrequestfullscreen) {
  element.mozrequestfullscreen ();
 } else if ( Element.webkitrequestfullscreen) {
  element.webkitrequestfullscreen ();
 } else if ( Element.msrequestfullscreen) {
  element.msrequestfullscreen ();
 }
}
Start Full screen!
Launchfullscreen (document.documentelement); Entire page
Launchfullscreen (document.getElementById ("videoelement"));//a page element

Call the Full-screen method for the page element that you want to display in full screen, and the browser window will become full screen, but the user will be asked to allow Full-screen mode first. Be aware that the user is likely to reject Full-screen mode. If the user runs Full-screen mode, the button menu of the browser's toolbar is hidden, and your page will cover the entire screen.

Exit Full-screen Mode

This Exitfullscreen method (also requires a browser prefix) will allow the browser to exit Full-screen mode and become normal mode.

The code is as follows:

Determine browser kind
function Exitfullscreen () {
 if (document.exitfullscreen) {
  document.exitfullscreen ();
 } else if (document.mozcancelfullscreen) {
  document.mozcancelfullscreen ();
 } else if ( Document.webkitexitfullscreen) {
  document.webkitexitfullscreen ();
 }
}
Exit Full-screen mode!
Exitfullscreen ();

It should be noted that Exitfullscreen can only be invoked by the document object, not when the Full-screen is started.

Full Screen properties and events

Unfortunately, the associated methods for Full-screen properties and events also need to add a browser prefix, but I'm sure it won't be necessary anytime soon.

1.document.fullscreenelement: A Web page element that is displayed in full screen.
2.document.fullscreenenabled: Determines whether the current Full-screen state is present.

The Fullscreenchange event triggers when the full screen is started or the full screen is exited:

The code is as follows:

var fullscreenelement = Document.fullscreenelement | | document.mozfullscreenelement | | document.webkitfullscreenelement;
var fullscreenenabled = document.fullscreenenabled | | document.mozfullscreenenabled | | document.webkitfullscreenenabled;

You can still prefix this event by using the method above to determine the type of browser.

Full Screen style CSS

A variety of browsers offer a very useful CSS style rule when Full-screen mode:

The code is as follows:

-webkit-full-screen {/

 * Properties/
}
:-moz-full-screen {/
 * properties */
}
:- Ms-fullscreen {
 /* properties
/}: Full-screen {/*pre-spec * *
 properties
/}: Fullscreen {/* spec
////////////////* Deeper elements//:-webkit-full-screen
 Video DTH:%;
 Height:%;
}
/* Styling the backdrop*/
:: Backdrop {/
 * Properties/
}
::-ms-backdrop {/
 * properties */< c30/>}

In some cases, there are some problems with the WebKit style, and you'd better keep these styles simple.

These Full-screen APIs are super simple and extremely useful. The first time I saw this API in MDN's Bananabread demo, it was a shooting game that needed to be full-screen, and it used event sniffing to detect full-screen state. Remember these handy APIs that you can use when you need them.