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/