With HTML5 JS Implementation Click a button to achieve full screen browser effect _javascript skills

The project needs to be the Background browser window full screen, that is, we click a button to achieve the effect of pressing F11 full-screen. In HTML5, the global Wide Web has developed a full screen of the API, you can achieve full-screen effect, you can also make the page in the picture, video and so on full screen currently only Google Chrome +, SAFRI5.1+,FIRFOX10+,IE11 support

Fullscreen

var Docelm = document.documentelement;

The 

if (docelm.requestfullscreen) { 

  docelm.requestfullscreen (); 

}

FireFox 

Else if (docelm.mozrequestfullscreen) { 

  docelm.mozrequestfullscreen (); 

}

Chrome et 

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

In the browser full screen use We can also make style settings

Html:-moz-full-screen { 
background:red; 
} 

Html:-webkit-full-screen { 
background:red; 
} 

Html:fullscreen { 
background:red; 

Appendix

11 Demo on line

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

2 HTML5 full Screen API phishing

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

3 Full Screen plugin for jquery encapsulation

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/