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

Copy Code code as follows:

Judge various browsers and find the right way
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.

Copy Code code as follows:

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 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:

Copy Code code 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:

Copy Code code as follows:

:-webkit-full-screen {
/* Properties */
}

:-moz-full-screen {
/* Properties */
}

:-ms-fullscreen {
/* Properties */
}

: full-screen {/*PRE-SPEC * *
/* Properties */
}

: fullscreen {/* Spec * *
/* Properties */
}

/* Deeper Elements * *
:-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, 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.