Encapsulation HTML5 fullscreen API

Last Update:2017-02-28 Source: Internet

Author: User

Tags exit return version

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Copy preface:

With the new Full-screen API, the user's attention can be directed to a specific element, while hiding the background or diverting attention from other applications. Most browser vendors use unique identifiers to add prefixes to APIs because the full screen specification for the web is not yet up to the final version. In this case, Microsoft uses Ms. It is best to have a single function that can request full screen mode for all prefixes, similar to most of the examples shown here. To get better performance, place the name of the consortium API first, followed by the version that sets the prefix.

First come to a few or detailed explanation of the address bar:

http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

http://www.wufangbo.com/html5-quanping/

Http://heeroluo.net/article/detail/97

Another Microsoft Developer Center address:

https://msdn.microsoft.com/zh-cn/library/ie/dn265028 (v=vs.85). aspx

Enter, exit full screen or full screen event:

Webkit (works in Safari5.1 and Chrome)
Element.webkitrequestfullscreen ();
Document.webkitcancelfullscreen ();
Test environment Chrome39 Support Document.webkitexitfullscreen ()
document.webkitisfullscreen 
//Firefox 10+
Element.mozrequestfullscreen ();
Document.mozcancelfullscreen ();
Document.mozfullscreen 
//ie11
element.msrequestfullscreen ();
Document.msexitfullscreen (); 
//The
Element.requestfullscreen () proposed by the consortium;
Document.exitfullscreen ();
Document.fullscreen

Next, encapsulate the code:

!function (w,d) {        var fs={                 Supportsfullscreen:false,                  Isfullscreen:false,                  requestfullscreen: ',                  exitfullscreen: ',                  fullscreenchange: ',                  prefix: '             },             ap=[' WebKit ' , ' Moz ', ' Ms '],   //opera 15 support full screen is WebKit kernel            &nbsp
Len=ap.length,             i=0;
                if (d.exitfullscreen) {             fs.supportsfullscreen=true         }else{            for (; i<len; i++) {                if (d[ap[i]+ ' Exitfullscreen '] d[ap[i]+ ' Cancelfullscreen ') {          
          fs.supportsfullscreen=true;                   
  Fs.prefix=ap[i];                      Break                }             }        }                  if (fs.supportsfullscreen) {      
      var P=fs.prefix;             fs.fullscreenchange=function (FN) {                 D.addeventlistener (p== ' MS ') ? ' Msfullscreenchange ': p+ ' Fullscreenchange ', function () {                     fn && fn ()                 },false)        
    };             Fs.fullscreenchange (function () {                 fs.isfullscreen= (function (p) {                     switch (p) {                          case ':               
              return d.fullscreen;                          case ' WebKit ':                              return
D.webkitisfullscreen;                          case ' Moz ':                              return
D.mozfullscreen;                          case ' MS ':                              return D.msfullscreenelement? True:false                     }                }
) (P)            });             fs.requestfullscreen=function (elem) {     
           var elem=elem d.documentelement;                 try{                     p? elem[p+ ' Requestfullscreen '] (): Elem.requestfullscreen ()    //chrome,ff, Standard                 }catch (e) {                     elem[p+ ' Requestfullscreen ' ] ()    //elem.msrequestfullscreen           
     }            };             fs.exitfullscreen=function () {                 try{                     p? d[p+ ' Exitfullscreen '] (): D.exitfullscreen ()    //ie, new chrome or Standard                 }catch (e) {                     d[p+ ' Cancelfullscreen '] ()     //old version of Chrome Firefox                 }            }         }         w.fs=fs    } (window,document);

Use method:

<body>         <div id= "Launch" > Enter full screen </div> </body>
    var Obtn=document.getelementbyid (' launch ');
    obtn.onclick=function () {        if (fs.supportsfullscreen) {
            Fs.isfullscreen?
            (Fs.exitfullscreen (), this.innerhtml= ' into full Screen '):             (Fs.requestfullscreen (), this.innerhtml= ' Exit full Screen ')        }else{             alert (' Sorry:your browser does not support fullscreen preview. ')       
 }    };         Fs.fullscreenchange (function () {        obtn.innerhtml = Fs.isfullscreen? ' Exit full Screen ': ' Enter full Screen '    } '

Compatibility:

http://caniuse.com/

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More