JavaScript controls methods, properties, and events for various browser full-screen modes

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

    Code as follows://Judge various browsers, find the correct method function Launchfullscreen (element) {  if (Element.requestfullscreen) {    Element.requestfullscreen ();  } else if (Element.mozrequestfullscreen) {    element.mozrequestfullscreen ();  } else if (ELEMENT.W Ebkitrequestfullscreen) {    element.webkitrequestfullscreen ();  } else if ( Element.msrequestfullscreen) {    element.msrequestfullscreen ();  }  //Start Full-screen! Launchfullscreen (document.documentelement); Entire page Launchfullscreen (document.getElementById ("videoelement")); A page element     calls the Full-screen method to the page element you want to display in full screen, the browser window becomes full screen, but the user is 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, into normal mode.     Code as follows://Judge Browser type function Exitfullscreen () {  if (Document.exitfullscreen) {    Document.exit Fullscreen ();  } else if (Document.mozcancelfullscreen) {    Document.mozcancElfullscreen ();  } else if (Document.webkitexitfullscreen) {    document.webkitexitfullscreen ();  }}  //Exit Full Screen Mode! Exitfullscreen ();     Note that Exitfullscreen can only be invoked by the Document object, not the object that was passed in when the Full-screen was 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 believe it will not be necessary to do so 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 when it exits:     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 with the method used to determine the browser type.   Full-screen style CSS   Various browsers provide a very useful full-screen mode when CSS style rules:     Code as follows::-webkit-full-screen { /* Properties/} &N Bsp :-moz-full-screen { /* Properties/}  :-ms-fullscreen { /* Properties/}  : Full-screen {/*p Re-spec * * &NBSp /* Properties/}  : fullscreen {/* Spec/ /* Properties/}  /* Deeper elements * *:-WEBKIT-FULL-SC Reen Video {  width:100%   height:100%}  /Styling the backdrop*/:: Backdrop { /* properties /}::-ms-backdrop { /* Properties/}     In some cases, the WebKit style will have some problems, 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.