Using html5js to achieve full screen browser effect by clicking a button _ javascript tips-js tutorial

Click a button to achieve full screen press F11. In HTML5, W3C has developed an API for full screen to achieve full screen effects. In the project, the full screen window of the background browser is required, that is, we click a button to achieve the F11 full screen effect. In HTML5, W3C has developed an API for full screen to achieve full screen effects. It can also enable full screen effects such as images and videos on pages. Currently, only google chrome 15 +, safri5.1 +, supported by firfox10 + and IE11

Full Screen

Var docElm = document.doc umentElement; // W3C if (docElm. requestFullscreen) {docElm. requestFullscreen ();} // FireFox else if (docElm. required requestfullscreen) {docElm. optional requestfullscreen ();} // else if (docElm. webkitRequestFullScreen) {docElm. webkitRequestFullScreen ();} // 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

You can also set the style when using full screen in the browser.

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

Appendix

1. An Online Demo

Http://robnyman.github.io/fullscreen/

2 HTML5 full-screen API phishing

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

3. jquery-encapsulated full-screen plug-in

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 HTML5 full-screen API display differences in FireFox/Chrome

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