JavaScript controls methods, properties, and events for various browser full-screen modes

Source: Internet
Author: User

  Browser Full screen mode of the start function Requestfullscreen still need to be accompanied by the browser's JS dialect prefix, I believe that the following code requires you to spend a lot of search to gather together:

    Code as follows://Judge various browsers, find the correct method function Launchfullscreen (element) {  if (Element.requestfullscreen) {    Element.requestfullscreen ();  } else if (Element.mozrequestfullscreen) {    element.mozrequestfullscreen ();  } else if (ELEMENT.W Ebkitrequestfullscreen) {    element.webkitrequestfullscreen ();  } else if ( Element.msrequestfullscreen) {    element.msrequestfullscreen ();  }  //Start Full-screen! Launchfullscreen (document.documentelement); Entire page Launchfullscreen (document.getElementById ("videoelement")); A page element     calls the Full-screen method to the page element you want to display in full screen, the browser window becomes full screen, but the user is asked to allow Full-screen mode first. Be aware that the user is likely to reject Full-screen mode. If the user runs Full-screen mode, the button menu of the browser's toolbar is hidden, and your page will cover the entire screen.   Exit Full-screen mode   This Exitfullscreen method (also requires a browser prefix) will allow the browser to exit Full-screen mode, into normal mode.     Code as follows://Judge Browser type function Exitfullscreen () {  if (Document.exitfullscreen) {    Document.exit Fullscreen ();  } else if (Document.mozcancelfullscreen) {    Document.mozcancElfullscreen ();  } else if (Document.webkitexitfullscreen) {    document.webkitexitfullscreen ();  }}  //Exit Full Screen Mode! Exitfullscreen ();     Note that Exitfullscreen can only be invoked by the Document object, not the object that was passed in when the Full-screen was started.   Full screen properties and events   Unfortunately, the associated methods for Full-screen properties and events also need to add a browser prefix, but I believe it will not be necessary to do so soon.   1.document.fullscreenelement: A Web page element that is displayed in full screen. 2.document.fullscreenenabled: Determines whether the current Full-screen state is present. The   Fullscreenchange event triggers when the full screen is started or when it exits:     code is as follows: var fullscreenelement = Document.fullscreenelement | | document.mozfullscreenelement | | Document.webkitfullscreenelement; var fullscreenenabled = document.fullscreenenabled | | document.mozfullscreenenabled | | document.webkitfullscreenenabled;       You can still prefix this event with the method used to determine the browser type.   Full-screen style CSS   Various browsers provide a very useful full-screen mode when CSS style rules:     Code as follows::-webkit-full-screen { /* Properties/} &N Bsp :-moz-full-screen { /* Properties/}  :-ms-fullscreen { /* Properties/}  : Full-screen {/*p Re-spec * * &NBSp /* Properties/}  : fullscreen {/* Spec/ /* Properties/}  /* Deeper elements * *:-WEBKIT-FULL-SC Reen Video {  width:100%   height:100%}  /Styling the backdrop*/:: Backdrop { /* properties /}::-ms-backdrop { /* Properties/}     In some cases, the WebKit style will have some problems, you'd better keep these styles simple.     These Full-screen APIs are super simple and extremely useful. The first time I saw this API in MDN's Bananabread demo, it was a shooting game that needed to be full-screen, and it used event sniffing to detect full-screen state. Remember these handy APIs that you can use when you need them.  

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.