wake-up-neo.com

Chrome-Vollbild-API

Laut diesem Artikel Google Chrome 15 verfügt über eine JavaScript-Vollbild-API.

Ich habe versucht, es zum Laufen zu bringen, ist aber gescheitert. Ich habe auch vergeblich nach offiziellen Unterlagen gesucht.

Wie sieht die Vollbild-JavaScript-API aus?

javascriptgoogle-chromefullscreen
67
Randomblue

Die API funktioniert nur während der Benutzerinteraktion und kann daher nicht böswillig verwendet werden. Versuchen Sie den folgenden Code:

addEventListener("click", function() {
    var el = document.documentElement,
      rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
    ;

    rfs.call(el);
});
138
Eli Grey

Ich habe einen einfachen Wrapper für die Fullscreen-API mit dem Namen screenfull.js erstellt, um das Präfix-Chaos auszugleichen und einige Inkonsistenzen in den verschiedenen Implementierungen zu beheben. Schauen Sie sich die Datei demo an, um zu sehen, wie die Vollbild-API funktioniert.

Literatur-Empfehlungen:

32
Sindre Sorhus

Hier sind einige Funktionen, die ich für das Arbeiten mit Vollbild im Browser erstellt habe.

Sie bieten sowohl den Vollbildmodus für die meisten Browser als auch den Vollbildmodus.

function isFullScreen()
{
    return (document.fullScreenElement && document.fullScreenElement !== null)
         || document.mozFullScreen
         || document.webkitIsFullScreen;
}


function requestFullScreen(element)
{
    if (element.requestFullscreen)
        element.requestFullscreen();
    else if (element.msRequestFullscreen)
        element.msRequestFullscreen();
    else if (element.mozRequestFullScreen)
        element.mozRequestFullScreen();
    else if (element.webkitRequestFullscreen)
        element.webkitRequestFullscreen();
}

function exitFullScreen()
{
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.msExitFullscreen)
        document.msExitFullscreen();
    else if (document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if (document.webkitExitFullscreen)
        document.webkitExitFullscreen();
}

function toggleFullScreen(element)
{
    if (isFullScreen())
        exitFullScreen();
    else
        requestFullScreen(element || document.documentElement);
}
14
Drew Noakes

Der folgende Test funktioniert in Chrome 16 (Entwicklungszweig) unter X86 und Chrome 15 unter Mac OSX Lion

http://html5-demos.appspot.com/static/fullscreen.html

6
Mo Kargas

Im Schließungsbibliothekprojekt von Google gibt es ein Modul, das die Aufgabe erfüllt. Nachfolgend finden Sie die API und den Quellcode.

Closure-Bibliothek fullscreen.js API

Schließungsbibliothek fullscreen.js Code

0
monjer