The FullScreen API allows an element on a page to have a full-screen view, which is typically seen in different graphic or media resources (such as video or images), but can actually have a full-screen view for any element on a page.

The FullScreen API is currently well supported in Chrome, Firefox, Opera, and Edge.

If you need cross-platform support for the FullScreen API, you can use the third-party script libraries Fscreen or ScreenFull.

To enable the full screen view on the user’s browser, first of all, you need to use the Element. The requestFullScreen function request for permission. This is different from requesting access to location data, where the browser basically approves or denies full screen access by determining whether the user has performed a specific action, such as clicking a allow button to determine whether the request has been accepted.

If users want to exit the full-screen view, they can use the universal exit full-screen window and press the Exit button.

Full screen section

The FullScreen API is most commonly used to zoom in on images and videos, but they all have their own little issues to consider, so I’ll start with something simpler: an HTML5 page with buttons that convert portions of the page into a full-screen view.

<div class="container"> <h1>FullScreen API demo </h1> <p> FullScreen API allows an element on a page to have a full-screen view, which is typically seen in different graphic or media resources (such as videos or images), But you can have a full-screen view of virtually any element on the page. </p> <section class="fullscreen-enabled"> <h2 class="fullscreen-intro"> AN HTML5 page with buttons that convert part of the page into a full-screen view. </h2> <h3 class="fullscreen-more"> </h3> <div class="bottom-right"> <button aria-label=" click to switch to fullscreen mode" Class ="button button-blue"> Full-screen </button> </div> </section> </div> <script type="text/javascript"> const toggleFullScreen = (el) => { if (! document.fullscreenElement) { el.requestFullscreen(); return; } document.exitFullscreen(); }; const button = document.querySelector("button"); button.addEventListener("click", () => { toggleFullScreen(document.querySelector(".fullscreen-enabled")); }); </script>Copy the code

You can click to see the DEMO.

Full screen modal

Modal popover layer is the main popover method in modern front-end. Here is to define a full-screen modal popover. The main code is as follows:

<div class="container"> <h1>FullScreen API demo </h1> <p> FullScreen API allows an element on a page to have a full-screen view, which is typically seen in different graphic or media resources (such as videos or images), But you can have a full-screen view of virtually any element on the page. </p> <button aria-label=" Click open full-screen Modal "class=" Button Fullscreener button-blue" > Full-screen modal </button> </div> <section role="dialog" aria-modal="true" aria-labelledby="modalLabel" class="fullscreen-enabled fullscreen-modal" > <div Class ="modal-content"> <h2 ID ="modalLabel" class="fullscreen-more"> </h2> <span role="button" tabindex="0" Aria-label ="Close the Modal "class="fullscreener Close "> </span> <div class="modalBody"> <p> To enable the fullscreen view on the user's browser, First of all need to use the Element. The requestFullScreen function request for permission. This is different from requesting access to location data, where the browser basically approves or denies full screen access by determining whether the user has performed a specific action, such as clicking a allow button to determine whether the request has been accepted. </p> </div> </div> </section> <script type="text/javascript"> const toggleFullScreen = (el) => { if (! document.fullscreenElement) { el.requestFullscreen(); return; } document.exitFullscreen(); }; const buttons = document.querySelectorAll(".fullscreener"); const fullScreenEnabledEl = document.querySelector(".fullscreen-enabled"); buttons.forEach((button) => { button.addEventListener("click", () => { toggleFullScreen(fullScreenEnabledEl); }); button.addEventListener("keydown", (e) => { if (e.key === "Enter") { toggleFullScreen(fullScreenEnabledEl); }}); }); </script>Copy the code

You can click to see the DEMO.

conclusion

The Fullscreen API is very simple to use and can bring many unexpected effects to the front end. In addition to the two simple uses described in this article, it can also be used for full-screen image viewing.