HTML5 API FullScreen con JavaScript

Question

Sto provando a creare un pulsante che attiva/disattiva lo schermo HTML5 a schermo intero su un determinato sito Web.

Dopo aver letto un sacco di documentazione, sembra che ci siano ancora alcune incongruenze tra il modo in cui i browser trattano certe proprietà per esso.

Sono andato per tipo di approccio "cross-browser" che fa funziona in Firefox e Safari/MacOS, funziona parzialmente in Safari/Windows e completamente non riesce a funzionare in Chrome e Opera.

alcuni frammenti di codice castrati:

// class init 
initialize: function() { 

    this.elmButtonFullscreen = $('fullscreen'); 
    this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this)); 
}, 

// helper methods 
_launchFullScreen: function(element) { 

    if(element.requestFullScreen) { element.requestFullScreen(); } 
    else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } 
    else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } 
}, 
_cancelFullScreen: function() { 

    if(document.cancelFullScreen) { document.cancelFullScreen(); } 
    else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } 
    else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } 
}, 
_isFullScreen: function() { 

    fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false; 
    if(this.debug) console.log('Fullscreen enabled? ' + fullScreen); 
    return fullScreen; 
}, 

// callbacks 
onClickFullscreen: function(e) { 

    e.stop(); 
    if(this._isFullScreen()) this._cancelFullScreen(); 
    else this._launchFullScreen(document.documentElement); 
} 

Answer 1

Modifica della prima linea di _isFullScreen funzione per

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen ? true : false; 

fa il trucco (almeno per Firefox, Chrome e Safari su Mac e Windows)

Answer 2

In base a quanto I found on Mozilla's Developer Network la funzione per Webkit è in realtà scritto leggermente diverso.

document.webkitRequestFullscreen con una "s" minuscola per schermo.

E from W3 spec, è pensato per essere con una "s" minuscola.

sul link MDN dicono:

Nota: La specifica utilizza l'etichetta, "a tutto schermo", come in "requestFullscreen" o "fullscreenEnabled" - senza 's' maiuscola. L'implementazione descritta qui e altre implementazioni prefissate possono utilizzare una "S" maiuscola.

Answer 3

Click Handler:

$("#toolFullScreen").click(function() { 
    goFullScreen(); 
}); 

Funzione:

function goFullScreen() { 
    var el = document.documentElement, 
     rfs = el.requestFullScreen 
     || el.webkitRequestFullScreen 
     || el.mozRequestFullScreen 
     || el.msRequestFullscreen; 

    rfs.call(el); 
} 

---

Tenete a mente che la richiesta fullScreen deve essere fatto tramite un evento utente-triggered ad esempio un evento click-mousedown, mouseup ecc ..