Introduction to methods, attributes, and events for Controlling Full Screen mode of various browsers using JavaScript

Copy codeThe Code is as follows:
// Judge various browsers and find the correct method
Function launchFullscreen (element ){
If (element. requestFullscreen ){
Element. requestFullscreen ();
} Else if (element. inclurequestfullscreen ){
Element. Required requestfullscreen ();
} Else if (element. webkitRequestFullscreen ){
Element. webkitRequestFullscreen ();
} Else if (element. msRequestFullscreen ){
Element. msRequestFullscreen ();
}
}

// Enable full screen!
LaunchFullScreen(document.doc umentElement); // The entire webpage
LaunchFullScreen (document. getElementById ("videoElement"); // a page Element

If you call the full screen method for the page elements you want to display in full screen mode, the browser window will become full screen, but the user will be requested to allow full screen mode first. Note that users are likely to reject full-screen mode. If the user runs full screen mode, the buttons and menus such as the toolbar of the browser will be hidden, and your page will overwrite the entire screen.

Exit full screen mode

This exitFullscreen method (also requires a browser prefix) will enable the browser to exit full screen mode and change to normal mode.
Copy codeThe Code is as follows:
// Determine the browser type
Function exitFullscreen (){
If (document. exitFullscreen ){
Document. exitFullscreen ();
} Else if (document. canccancelfullscreen ){
Document. Define cancelfullscreen ();
} Else if (document. webkitExitFullscreen ){
Document. webkitExitFullscreen ();
}
}

// Exit full screen mode!
ExitFullscreen ();

Note that exitFullscreen can only be called by the document Object, rather than the object passed in when full screen is started.

Full Screen attributes and events

Unfortunately, you also need to add a browser prefix to the full screen attribute and event-related methods, but I believe this will not be necessary soon.

1.doc ument. fullScreenElement: webpage element displayed in full screen.
2.doc ument. fullScreenEnabled: determines whether the current status is full screen.

The fullscreenchange event is triggered when full screen is enabled or full screen is exited:

Copy codeThe Code is as follows:
Var fullscreenElement = document. fullscreenElement | document. effecfullscreenelement | document. webkitFullscreenElement;
Var fullscreenabled = document. fullscreenabled | document. effecfullscreenabled | document. webkitfullscreenabled;

You can still use the method above to determine the browser type to prefix this event.

Full Screen style CSS

Various browsers provide a very useful css style rule in full screen mode:

Copy codeThe Code is 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, WebKit styles may have some problems. You 'd better keep these styles concise.

These full-screen APIs are super simple and extremely useful. The first time I saw this API in the MDN's BananaBread demo, it was a shooting game that needs to be fully screen. It used event listening to detect the full screen status. Remember these easy-to-use APIs, which can be easily used when needed.