Use html5 js to achieve full-screen effect of clicking a button

In the project, the background browser window needs to be fully screened, that is, we click a button to achieve the effect of pressing F11 full screen. In HTML5, W3C has formulated a full-screen API, which can achieve full-screen effects, and can also allow full-screen images, videos, etc. on the page to have full-screen images currently only supported by Google Chrome 15+, safri5.1+, firfox10+, IE11.

full screen

 var docElm = document.documentElement;//W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); }//FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }//IE11else if (elem.msRequestFullscreen) { { elem.msRequestFullscreen();}

Exit full screen

 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }

Event listening

 document.addEventListener("fullscreenchange", function () { fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); document.addEventListener("mozfullscreenchange", function () { fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); document.addEventListener("webkitfullscreenchange", function () { fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); document.addEventListener("msfullscreenchange", function () { fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);

Full screen style settings

We can also use full screen browser to set styles

 html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; }

appendix

1 Online Demo

http://robnyman.github.io/fullscreen/

2 HTML5 full screen API for phishing

http://www.36ria.com/5807

3 full-screen plug-in encapsulated by jquery

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4 More detailed full-screen API introduction

4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5 Display differences in HTML5 full screen API in FireFox/Chrome

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/