JS lets the browser full screen mode method Launchfullscreen

Browser full-screen mode startup function Requestfullscreen still need to accompany the browser's JS dialect prefix

Judging various browsers, 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 Web page launchfullscreen (document.getElementById ("videoelement")); A page element
When you call the full-screen method for a page element that 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 users will most likely reject full-screen mode. If the user runs full-screen mode, the buttons menu such as the browser's toolbar will be hidden and your page will cover the entire screen.

Exit Full Screen mode

This Exitfullscreen method (which also requires a browser prefix) will let the browser exit full-screen mode and become normal mode.

Determine browser type 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 is important to note that Exitfullscreen can only be called by the Document object, not the object that is passed in when the full screen is started.

Full-screen properties and events

Unfortunately, the related methods of full-screen properties and events also require a browser prefix, but I'm sure it won't be necessary soon.

• Document.fullscreenelement: A page element that is displayed in full screen.
• Document.fullscreenenabled: Determines whether the current is in full-screen mode.

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

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

You can still prefix this event with a method of judging the browser type above.

Full-screen style CSS

Various browsers provide a very useful full-screen mode when the CSS style rules:

:-webkit-full-screen {/  * properties */}:-moz-full-screen {/  * properties */}:-ms-fullscreen {/  * Properties */}:full-screen {/*PRE-SPEC */  * Properties */}:fullscreen {/* spec */  * Properties */}/* deeper El Ements */:-webkit-full-screen Video {  width:100%;  height:100%;} /* Styling the Backdrop*/::backdrop {/  * properties */}::-ms-backdrop {/  * properties */}

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

Article Source: http://www.weste.net/2014/4-4/96193.html

JS lets the browser full screen mode method Launchfullscreen