[JavaScript] using HTML5 JS to implement full-screen browser

The project needs to be the background browser window full screen, that is, we click on a button to achieve the F11 full screen

Effect. In HTML5, the Global wide-screen API has been developed to achieve full

Make the page images, videos and so on full screen currently only Google Chrome +,SAFRI5.1+,FIRFOX10+,IE11 support

Full Screen :

var Docelm = document.documentelement;//w3c if (docelm.requestfullscreen) {docelm.requestfullscreen ();  }//firefox else if (docelm.mozrequestfullscreen) {docelm.mozrequestfullscreen ();  }//chrome and other 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 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.webkitisfull screen)? "": "Not";}, False);d Ocument.addeventlistener ("Msfullscreenchange", function () {fullscreenstate.innerhtml = (docume nt.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 Online Demos

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

2 HTML5 full Screen API phishing

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

3 Full -screen plugin for jquery packages

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/