HTML5 full screen browser compatibility scheme

A recent project has a full-screen page of requirements, search for the next HTML5 full-screen API available, but the support of different browsers.

Standard	WebKit	Firefox	IE
Element.requestfullscreen ()	Webkitrequestfullscreen	Mozrequestfullscreen	Msrequestfullscreen
Document.exitfullscreen ()	Webkitexitfullscreen	Mozcancelfullscreen	Msexitfullscreen
Document.fullscreenelement	Webkitfullscreenelement	Mozfullscreenelement	Msfullscreenelement
Document.fullscreenenabled	Webkitfullscreenenabled	Mozfullscreenenabled	Msfullscreenenabled
Document.fullscreenchange	Webkitfullscreenchange	Mozfullscreenchange	Msfullscreenchange
Document.fullscreenerror	Webkitfullscreenerror	Mozfullscreenerror	Msfullscreenerror

MDN fullscreen api:the fullscreen API provides an easy-to-web content to be presented using the user ' s Enti Re screen. The API lets you easily direct the browser to make a element and its children, if any, occupy the fullscreen, eliminating All browser user interface and other applications from the screens for the duration.

The full screen interface provides a simple way to display the content of the browser through the user's entire screen. This interface allows us to easily guide the browser to make an element and its child elements occupy the entire screen and remove all browser user interfaces and other applications from the screen.

One, the use of the interface (Google browser as an example) 1.requestFullscreen ()

Full-screen request method, using method: Element.requestFullscreen() .

<div id="example">        <button type="button" id="requestFullscreen">requestFullscreen</button></div><script>// 全屏document.getElementById(‘requestFullscreen‘).addEventListener(‘click‘, () => {    document.querySelector(‘img‘).webkitRequestFullscreen();});</script>

After triggering an event, you will be prompted to exit full-screen mode by pressing ESC .

Attention

1. Use full screen in the < iframe > frame to add the allowFullScreen attribute. 2. The full-screen request can only be triggered by user action, otherwise Failed to execute ' requestfullscreen ' on ' Element ': API can is initiated by a user gesture. The workaround is to bind this method to a user action event, such as a click event click .

(function () {    document.documentElement.webkitRequestFullscreen();})();

2.exitFullscreen ()

To exit full-screen mode, use the method: document.exitFullscreen() except requestFullscreen() for the other methods and properties are based document .

<div id="example">        <button type="button" id="requestFullscreen">requestFullscreen</button>    <button type="button" id="exitFullscreen">exitFullscreen</button></div><script>// 退出全屏document.getElementById(‘exitFullscreen‘).addEventListener(‘click‘, () => {    document.webkitExitFullscreen();});</script>

After the trigger exits the full Screen recovery page, you can also press ESC to exit, and F11 can also make the page full-screen display and exit, but this should belong to the browser function, not within the scope of the HTML5 API.

3.fullscreenElement

In full-screen mode, the full-screen element is displayed, if not, returned null .

<div id="example">        <button type="button" id="requestFullscreen">requestFullscreen</button>    <button type="button" id="exitFullscreen">exitFullscreen</button>    <button type="button" id="fullscreenElement">fullscreenElement</button></div><script>// 显示全屏元素document.getElementById(‘fullscreenElement‘).addEventListener(‘click‘, () => {    console.log(document.webkitFullscreenElement); // <div id=...></div> 或 null});</script>

4.fullscreenEnabled

Returns a Boolean value true/false that determines whether full-screen mode is available.

<div id="example">        <button type="button" id="fullscreenEnabled">fullscreenEnabled</button></div><script>// 全屏是否可用document.getElementById(‘fullscreenEnabled‘).addEventListener(‘click‘, () => {    console.log(document.webkitFullscreenEnabled); // true});</script>

Second, browser-compatible

Because the main browser calls the full-screen interface method is inconsistent, so the call needs to determine the current browser applicable methods.

I made a simple request for full screen and exit full screen adaptation.

Const Mazey_full_screen = function () {Let Prefixarr = [', ' WebKit ', ' Moz ', ' Ms '],//browser prefix isrightrequest,// Whether to find a suitable method isrightexit, Requestmethod,//Full screen method Exitmethod,//Exit full Screen Method Lowerfirst = function (st        R) {return Str.slice (0, 1). toLowerCase () + str.slice (1); }, Requestsuffixarr = [' Requestfullscreen ', ' requestfullscreen '],//suffix Exitsuffixarr = [' Exitfullscreen ', ' Cancelfullscreen '], Searchrightmethod = function (prefix, Suffixarr, documentparent) {Let Methodarr = s            Uffixarr.map ((suffix) = {return prefix + suffix;            }), method, Isright;                Methodarr.foreach ((Wholeprefix) = {if (isright) return; if (prefix.length = = = 0) {Wholeprefix = Lowerfirst (Wholeprefix)} if (wh                  Oleprefix in Documentparent) {method = Wholeprefix;  Isright = true;                Console.log (method);            }            });        return method;    };        Prefixarr.foreach ((prefix) = {if (isrightrequest && isrightexit) return;        Find Request Requestmethod = Searchrightmethod (prefix, Requestsuffixarr, document.documentelement);        Isrightrequest = Boolean (Requestmethod);        Find Exit Exitmethod = Searchrightmethod (prefix, Exitsuffixarr, document);    Isrightexit = Boolean (Exitmethod);    });        This.request = function (Element) {Let Domele = Document.queryselector (element) | | document.documentelement;    Domele[requestmethod] ();    };    This.exit = function () {Document[exitmethod] (); };}; Let fullscreen = new Mazey_full_screen ();

Examples of Use:

Sample code: GitHub

HTML5 full screen browser compatibility scheme