JavaScript: Methods, attributes, and events for controlling browser full screen and various browser full screen modes _ javascript skills

This article mainly introduces the methods, attributes, and events related to JavaScript browser full screen control and various browser full screen modes. For more information, see full screen in HTML 5, currently, it can be used in browsers other than IE and opera. sometimes it is useful for full-screen APIs, games, and so on. First look at common APIs

Element. requestFullScreen ()

Purpose: request a full screen element.

Document. getElementById ("myCanvas"). requestFullScreen ()

Here, the element ID is requested to fullscreen

Exit full screen

Document. cancelFullScreen ()

Document. fullScreen

Returns true if the user is in full screen mode.

Document. fullScreenElement

Returns the elements in full screen mode.

The following code enables 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 calls full screen mode for the entire page

But to be honest, there is a problem with full screen, which can easily lead to spoofing, for example, in
Bytes

$ ('HTML '). on ('click keypress ', 'A', function (event) {// does not respond to the real a HREF click event. preventDefault (); event. stopPropagation (); // Trigger fullscreen if (elementPrototype. requestFullscreen) {document.doc umentElement. requestFullscreen ();} else if (elementPrototype. webkitRequestFullScreen) {document.doc umentElement. webkitRequestFullScreen (Element. ALLOW_KEYBOARD_INPUT);} else if (elementPrototype. required requestfullscreen) {document.doc umentElement. required requestfullscreen ();} else {//} // display fake UI $ ('# menu, # browser '). show (); $ ('# target-site '). show ();});

The following describes the methods, attributes, and events for controlling full-screen browsers using JavaScript.

The browser's full-screen startup function requestFullscreen still requires the js dialect prefix of each browser. I believe that the following code requires you to spend a lot of searching to get 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. required requestfullscreen) {element. required requestfullscreen ();} else if (element. webkitRequestFullscreen) {element. webkitRequestFullscreen ();} else if (element. msRequestFullscreen) {element. msRequestFullscreen () ;}// start full screen! LaunchFullScreen(document.doc umentElement); // 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.

The code is as follows:

// Determine the browser type function exitFullscreen () {if (document. exitFullscreen) {document. exitFullscreen ();} else if (document. mozCancelFullScreen) {document. canccancelfullscreen ();} 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:

The code is as follows:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

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:

The 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: %; height: %;}/* 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.