Home > Developer > Web Develop
Accidental Discovery A page has a button to make the Web page full screen, check the next code discovery is H5 full-screen API, so looked up the next information, recorded for later development of reference, I believe for other people also useful.
Resources:
Using JS how to make the page full screen and not full screen function
Element.requestfullscreen () MDN
H5 has a full-screen API, theElement.requestfullscreen () method is used to emit an asynchronous request to bring the element into full-screen mode.
It is important to note that only standard HTML elements, elements, and elements that are contained within the top-level document <svg> <math> , as well as the inner elements of an IFRAME with the allowFullScreen attribute, can enter full-screen mode. This means that elements inside the frame, as well as the inner elements of object, cannot enter full-screen mode.
The sample code is as follows:
<!doctype html>Full-screen EventIf the element is allowed to enter full-screen mode, the document object receives a Fullscreenchange event informing the caller that the current element has entered full-screen mode. If the full-screen request is not licensed, you will receive a Fullscreenerror event .
Examples are as follows:
document.addEventListener('fullscreenchange', function(){ /*code*/ });document.addEventListener('webkitfullscreenchange', function(){ /*code*/});document.addEventListener('mozfullscreenchange', function(){ /*code*/});document.addEventListener('MSFullscreenChange', function(){ /*code*/});document.addEventListener('fullscreenerror', function(){ /*code*/ });document.addEventListener('webkitfullscreenerror', function(){ /*code*/});document.addEventListener('mozfullscreenerror', function(){ /*code*/);document.addEventListener('MSFullscreenError', function(){ /*code*/ });
Full Screen styleAfter full screen, you can also choose to adjust the style , just like hover, as follows:
:-webkit-full-screen { }:-moz-full-screen { }:-ms-fullscreen { }:fullscreen { }
JS make the page full screen
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
