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

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

0

In Googles Abschlussbibliotheksprojekt gibt es ein Modul, das die Aufgabe erledigt hat. Unten finden Sie die API und den Quellcode.

Closure Library fullscreen.js API

Closure libray fullscreen.js Code

— monjer
quelle