HTML5 FullScreen API toggle mit JavaScript

Question

Ich versuche, eine Schaltfläche, die HTML5 Vollbild auf einer bestimmten Website ein-/ausschalten würde.

Nach dem Lesen von vielen Dokumentationen scheint es immer noch einige Inkonsistenzen zu geben, wie Browser bestimmte Eigenschaften dafür behandeln.

Ich ging für eine Art "Cross-Browser" -Ansatz, die funktioniert in Firefox und Safari/MacOS funktioniert, teilweise in Safari/Windows funktioniert und funktioniert völlig in Chrome und Opera.

Einige kastriert Code-Schnipsel:

// 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

Ändern der 1. Zeile von _isFullScreen Funktion

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

funktioniert der Trick (zumindest für Firefox, Chrome und Safari auf Mac und Windows)

Answer 2

Basierend auf was I found on Mozilla's Developer Network die Funktion für Webkit ist eigentlich etwas anders buchstabiert.

document.webkitRequestFullscreen mit einem Kleinbuchstaben "s" für den Bildschirm.

Und from W3 spec, ist es mit einem Kleinbuchstaben "s" gemeint.

Auf dem MDN Link sagen sie:

Hinweis: Die Angabe dieses Etikett verwendet, "Vollbild", wie in "requestFullscreen" oder "fullscreenEnabled" - ohne Kapital 's'. Die hier beschriebene Implementierung und andere vorangestellte Implementierungen können ein Großbuchstabe "S" verwenden.

Answer 3

Click Handler:

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

Funktion:

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

    rfs.call(el); 
} 

---

Beachten Sie, dass fullScreen Bedürfnisse anfordernden über einen Benutzer ausgelöstes Ereignis durchgeführt werden, wie ein Click-Ereignis-mousedown, mouseup etc ..