Copy preface:
Using the new full-screen API, you can direct the user's attention to specific elements while hiding the background or diverting attention from other apps. Because the full-screen specification has not yet reached the final version, most browser vendors use unique identifiers to add prefixes to the API. In this example, 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. For better performance, place the name of the list API first, followed by the version with the prefix set.
First, a few or more explanations of the address:
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
Add another Microsoft Developer Center address:
https://msdn.microsoft.com/zh-cn/library/ie/dn265028 (v=vs.85). aspx
Enter, exit full screen or whether full-screen event:// Webkit (works in Safari5.1 and Chrome) Element.webkitrequestfullscreen (); Document.webkitcancelfullscreen (); Test environment Chrome39 Support Document.webkitexitfullscreen () document.webkitisfullscreen // Firefox element.mozrequestfullscreen (); Document.mozcancelfullscreen (); Document.mozfullscreen //ie11 element.msrequestfullscreen (); Document.msexitfullscreen (); // Proposal Element.requestfullscreen (); Document.exitfullscreen (); Document.fullscreen
Next encapsulate the code:
!function(w,d) {varfs={supportsfullscreen:false, IsFullScreen:false, Requestfullscreen:‘‘, Exitfullscreen:‘‘, Fullscreenchange:‘‘, prefix:‘‘}, AP=[' WebKit ', ' Moz ', ' Ms ',//Opera 15 supports full screen is WebKit kernellen=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) {varp=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‘‘: returnD.fullscreen; Case' WebKit ': returnD.webkitisfullscreen; Case' Moz ': returnD.mozfullscreen; Case' Ms ': returnD.msfullscreenelement?true:false}) (P)}); Fs.requestfullscreen=function(elem) {varElem=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);
How to use:
<body> <div id= "Launch" > Go full Screen </div></body>varObtn=document.getelementbyid (' launch '); Obtn.onclick=function(){ if(fs.supportsfullscreen) {Fs.isfullscreen?(Fs.exitfullscreen (), This. innerhtml= ' Go 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 ': ' Go to full Screen ' })
Compatibility:
http://caniuse.com/#feat =fullscreen
Encapsulating HTML5 Fullscreen API
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
