Interfejs API HTML5 FullScreen z JavaScriptem

Question

Próbuję zrobić przycisk, który przełączy (wł/wył) pełny ekran HTML5 na określonej stronie internetowej.

Po przeczytaniu dużej dokumentacji, wydaje się, że nadal istnieją pewne niespójności między sposobami traktowania przeglądarek przez określone właściwości.

Poszedłem na coś w stylu "przeglądarki", które działa w Firefoksie i Safari/MacOS, działa częściowo w Safari/Windows i zupełnie nie działa w Chrome i Operze.

Niektóre wykastrowane fragmenty kodu:

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

Zmiana 1st linię _isFullScreen funkcji do

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

załatwia sprawę (przynajmniej dla Firefox, Chrome i Safari na Mac i Windows)

Answer 2

podstawie tego, co I found on Mozilla's Developer Network funkcja dla Webkit jest rzeczywiście pisane nieco inaczej.

document.webkitRequestFullscreen z małymi literami "s" dla ekranu.

I from W3 spec, to znaczy, że ma małe litery "s".

odnośnik MDN mówią:

Uwaga: specyfikacja używa etykiety „Pełny ekran”, jak w „requestFullscreen” lub „fullscreenEnabled” - bez kapitału „S”. Opisana tutaj implementacja i inne prefiksowane implementacje mogą wykorzystywać duże "S".

Answer 3

Kliknij Handler:

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

Funkcja:

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

    rfs.call(el); 
} 

---

Należy pamiętać, że zainteresowanie fullScreen należy zrobić poprzez zdarzenia wywoływane przez użytkownika, takich jak imprezy click - mousedown, mouseup etc ..