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

Source: Internet
Author: User

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/

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.