Chrome-Vollbild-API

70

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

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

Wie sieht die Vollbild-JavaScript-API aus?

javascript google-chrome fullscreen Zufälliges Blau
quelle
Dies ist die vorgeschlagene Spezifikation, die implementiert werden soll: wiki.mozilla.org/Gecko:FullScreenAPI#Proposed_Specification .
Pimvdb
Ich habe es auch nicht zum Laufen gebracht , obwohl sie dies in WebKit implementiert haben: bugs.webkit.org/show_bug.cgi?id=43099 . Dies ist der Chromium-Fehler, der möglicherweise relevant ist: code.google.com/p/chromium/issues/detail?id=73923 .
Pimvdb
2
Sie können es im "Kiosk-Modus" (Vollbild, keine Steuerelemente) wie folgt starten: chrome.exe –kiosk http: // ...
Diodeus - James MacFarlane

Antworten:

143

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);
});
Eli Gray
quelle
3
Wie ist "Benutzerinteraktion" definiert?
Randomblue
Die meisten UIEvents und MouseEvents, wie clickund keydownusw.
Eli Gray
Dies funktioniert für mich, um in den Vollbildmodus zu gelangen. Wenn der Benutzer jedoch zur nächsten Seite meiner Website navigiert, wird der Vollbildmodus beendet. Gibt es eine Möglichkeit, dies zu vermeiden?
Alex9311
1
@ alex9311 Soweit ich weiß, müssen Sie AJAX verwenden, um Inhalte zu aktualisieren. Sie können die Seite nicht verlassen.
Michael
Dies funktioniert mit "Klick", aber nicht mit "Mouseenter". Aber Mouseenter ist AUCH eine Benutzerinteraktion.
Johny, warum
35

Ich habe einen einfachen Wrapper für die Vollbild-API namens screenfull.js erstellt , um das Präfix-Durcheinander auszugleichen und einige Inkonsistenzen in den verschiedenen Implementierungen zu beheben. Probier das aus Demo an, um zu sehen, wie die Vollbild-API funktioniert.

Literatur-Empfehlungen:

Sindre Sorhus
quelle
Wow - so ein tolles Plugin, danke! Gibt es eine Möglichkeit, einen Link im Vollbildmodus zu öffnen, während die aktuelle Registerkarte nicht im Vollbildmodus angezeigt wird? habe so etwas in der Demo nicht gefunden.
Cukabeka
16

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

Sie bieten sowohl Vollbild-Eingabe als auch Vollbild in den meisten gängigen Browsern.

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);
}
Drew Noakes
quelle
7

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

Mo Kargas
quelle
Wenn ich "enterFullScreen ()" über die Konsole eingebe, wird es nicht im Vollbildmodus angezeigt.
Randomblue
3
Sie müssen den Aufruf requestFullScreen () für ein Element ausführen, das Sie im Vollbildmodus anzeigen möchten. Es gibt keine Möglichkeit, einfach in den Modus zu springen. Hier ist eine weitere hervorragende Beschreibung der FullScreen-API von John Dyer mit einem vollständigen Beispiel johndyer.name/…
Mo Kargas
Link 404s jetzt.
Anthony