Encapsulate Html5 Fullscreen API
With the new full-screen API, you can focus your attention on specific elements while hiding the background or moving your attention to other applications. Because the W3C full-screen specification has not yet reached the final version, most browser vendors use unique identifiers to add prefixes For APIs. In this example, Microsoft uses ms. It is best to have a single function that can request full-screen mode with all prefixes, similar to most of the examples shown here. To obtain better performance, place the W3C API name first, followed by the version with the specified prefix. Enter and exit full screen or whether the event is full screen: // Webkit (works in Safari5.1 and Chrome 15) element. webkitRequestFullScreen (); document. webkitCancelFullScreen (); the test environment chrome39 supports document. webkitExitFullscreen () document. webkitIsFullScreen // Firefox 10 + element. required requestfullscreen (); document. optional cancelfullscreen (); document. mozFullScreen // ie11 element. msRequestFullscreen (); document. msExitFullscreen (); // W3C proposes element. requestF Ullscreen (); document. exitFullscreen (); document. fullscreen encapsulate the following code :! Function (w, d) {var fs = {supportsFullScreen: false, isFullScreen: false, requestFullScreen: '', exitFullScreen:'', fullscreenchange: '', prefix :''}, aP = ['webkit ', 'moz', 'ms'], // opera 15 supports full-screen webkit kernel len = aP. length, I = 0; if (d. exitFullscreen) {fs. supportsFullScreen = true} else {for (; I <len; I ++) {if (d [aP [I] + 'exitfullscreen '] | d [aP [I] + 'canonicalfullscreen']) {fs. supportsFullScreen = true; fs. prefix = aP [I]; bre Ak }}if (fs. supportsFullScreen) {var p = fs. prefix; fs. fullscreenchange = function (fn) {d. addEventListener (p = 'ms '? 'Msfullscreenchang': p + 'fullscreenchang', 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. define fullscreen; case 'ms': return d. msFullscreenElement? True: false}) (p)}); fs. requestFullScreen = function (elem) {var elem = elem | d.doc umentElement; 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 version chrome or standard} catch (e) {d [p + 'canonicalfullscreen '] () // old version chrome Firefox} w. fs = fs} (window, document); usage: <body> <div id = "launch"> full screen </div> </body> var oBtn = document. getElementById ('launch'); oBtn. onclick = function () {if (fs. supportsFullScreen) {fs. isFullScreen? (Fs. exitFullScreen (), this. innerHTML = 'enter Full Screen '): (fs. requestFullScreen (), this. innerHTML = 'exit fullScreen ')} else {alert ('Sorry: Your browser does not support fullScreen preview. ')}; fs. fullscreenchange (function () {oBtn. innerHTML = fs. isFullScreen? 'Exit Full Screen ': 'enter Full Screen '})
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
