Introduction to JavaScript methods, properties and events for controlling the full-screen mode of various browsers

Introduction to JavaScript methods, properties and events for controlling the full-screen mode of various browsers_javascript skills

WBOY

Release： 2016-05-16 16:53:30

Original

1350 people have browsed it

Copy code The code is as follows:

// Judge various browsers and find The correct method is
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();
}
}

//Launch full screen!
launchFullScreen(document.documentElement); //The entire webpage
launchFullScreen(document.getElementById("videoElement")); //A certain page element

Call the full screen method on the page element you want to display in full screen. The browser window will become full screen, but the user will be asked to allow full screen mode first. Be aware that users will most likely reject full screen mode. If the user runs in full-screen mode, the browser's toolbar and other button menus will be hidden, and your page will cover the entire screen.

Exit full screen mode

This exitFullscreen method (which also requires the browser prefix) will cause the browser to exit full-screen mode and change to normal mode.

Copy code The code is 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 called by the document object, not the object passed in when starting full screen.

Full screen properties and events

Unfortunately, the fullscreen properties and related methods of the event also require the browser prefix to be added, but I believe this will not be necessary soon.

1.document.fullScreenElement: Web page element displayed in full screen.
2.document.fullScreenEnabled: Determine whether it is currently in full screen state.

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

Copy code 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 above method to determine the browser type to prefix this event.

Full screen style CSS

Various browsers provide a very useful CSS style rule for full screen mode:

Copy code 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: 100%;
height: 100%;
}

/* styling the backdrop*/
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}

In some cases, WebKit styles can cause problems, and you'd better keep these styles simple.

These full-screen APIs are super simple and super useful. I first saw this API in MDN's BananaBread demo. It was a shooting game that just needed to be full-screen. It used event listening to detect the full-screen state. Remember these useful APIs and you can use them when needed.