Use html5 js to achieve full-screen browser effect by clicking a button_javascript skills

In the project, we need to make the background browser window full screen, that is, we click a button to achieve the full screen effect of pressing F11. In HTML5, W3C has developed a full-screen API, which can achieve full-screen effects, and can also make pictures, videos, etc. on the page full-screen. Currently, only Google Chrome 15, safri5.1, firfox10, and IE11 support

Full screen

var docElm = document.documentElement;

//W3C

if (docElm.requestFullscreen) {

  docElm.requestFullscreen();

}

//FireFox

else if (docElm.mozRequestFullScreen) {

  docElm.mozRequestFullScreen();

}

//Chrome等

else if (docElm.webkitRequestFullScreen) {

  docElm.webkitRequestFullScreen();

}

//IE11

else 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 monitoring

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 set the style when using the browser in full screen

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 Full-screen plug-in encapsulated by jquery

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

4 A more detailed introduction to the full-screen API

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

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