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

Source: Internet
Author: User


Copy Code code as follows:

Judge various browsers and find the right way
function Launchfullscreen (Element) {
if (Element.requestfullscreen) {
Element.requestfullscreen ();
else if (Element.mozrequestfullscreen) {
Element.mozrequestfullscreen ();
else if (Element.webkitrequestfullscreen) {
Element.webkitrequestfullscreen ();
else if (Element.msrequestfullscreen) {
Element.msrequestfullscreen ();
}
}

Start Full screen!
Launchfullscreen (document.documentelement); Entire page
Launchfullscreen (document.getElementById ("videoelement")); A page element

Call the Full-screen method for the page element that you want to display in full screen, and the browser window will become full screen, but the user will be 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 and become normal mode.

Copy Code code as follows:

Determine browser type
function Exitfullscreen () {
if (Document.exitfullscreen) {
Document.exitfullscreen ();
else if (Document.mozcancelfullscreen) {
Document.mozcancelfullscreen ();
else if (Document.webkitexitfullscreen) {
Document.webkitexitfullscreen ();
}
}

Exit Full-screen Mode!
Exitfullscreen ();

It should be noted that Exitfullscreen can only be invoked by the document object, not when the Full-screen is 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'm sure it won't be necessary anytime 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 the full screen is exited:

Copy Code code as follows:

var fullscreenelement = Document.fullscreenelement | | document.mozfullscreenelement | | Document.webkitfullscreenelement;
var fullscreenenabled = document.fullscreenenabled | | document.mozfullscreenenabled | | document.webkitfullscreenenabled;


You can still prefix this event by using the method above to determine the type of browser.

Full Screen style CSS

A variety of browsers offer a very useful CSS style rule when Full-screen mode:

Copy Code code as follows:
:-webkit-full-screen {
/* Properties */
}

:-moz-full-screen {
/* Properties */
}

:-ms-fullscreen {
/* Properties */
}

: full-screen {/*PRE-SPEC * *
/* Properties */
}

: fullscreen {/* Spec * *
/* Properties */
}

/* Deeper Elements * *
:-webkit-full-screen Video {
width:100%;
height:100%;
}

* * Styling the backdrop*/
:: Backdrop {
/* Properties */
}
::-ms-backdrop {
/* Properties */
}

In some cases, there are some problems with the WebKit style, and 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.

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.