Die Vollbild-API funktioniert nicht, wenn sie mit F11 ausgelöst wird

8

Ich habe eine Vollbild-Umschaltfunktion für meine Anwendung implementiert und sie funktioniert wirklich gut, getestet mit den neuesten Versionen von Chrome, Firefox, IE und Opera. Ich habe eine Methode zum Aktivieren und eine zum Deaktivieren des Vollbildmodus:

%Vor%

Wenn sie von der Benutzeroberfläche ausgelöst werden, funktionieren beide gut. Das einzige Problem ist, wenn ich den Vollbildmodus mit F11 betrete, kann ich es nicht mit der Funktion deactivateFullscreen beenden. Soweit ich es für den Browser verstehe, wird kein Flag gesetzt, wenn ich F11 drücke. Ich habe versucht, es mit der folgenden Methode zu testen:

%Vor%

Dies gibt immer false zurück, egal ob ich im Vollbildmodus bin oder nicht. Gibt es eine andere Möglichkeit zu erkennen, ob ich den Browser derzeit im Vollbildmodus betreibe? Oder fehlt mir hier etwas Konzept?

Eine andere Sache, die ich ausprobiert habe, ist, das Keydown-Ereignis für F11 abzufangen und seine Standardaktion zu verhindern.

%Vor%

Mit dieser Methode erwartete ich, alle F11 -Ereignisse zu unterdrücken, um den Vollbild-Wechsel manuell über Code zu verarbeiten. Leider funktioniert das auch nicht. Der Grund erscheint etwas merkwürdig, das Keydown-Event wird einfach nicht ausgelöst, wenn ich schon im Vollbildmodus bin. Daher kann ich das Ereignis außerhalb des Vollbildmodus unterdrücken, aber nicht sobald ich es eingegeben habe.

Aktualisierung: Einige Untersuchungen haben gezeigt, dass Sicherheitsbedenken bei Browser-Anbietern der Grund für dieses Verhalten sind. Dennoch muss es eine Möglichkeit geben, mit solchen Features umzugehen.

    
indexoutofbounds 13.04.2017, 12:39
quelle

2 Antworten

4

Es scheint jetzt unmöglich.

Siehe diese Frage , die genau das Gleiche verlangt. Aber es ist eine sich entwickelnde Situation, die es verdient, von Zeit zu Zeit überarbeitet zu werden. Hier sind einige Details, die ich gesammelt habe.

Ein Kommentar dort sagte:

  

Dieser Fullscreen-Fenstermodus ist vom Betriebssystem abhängig, nur auf App-Ebene und nicht an API gebunden, die für uns schlechte Web-Entwickler verfügbar sind. [...] Sie werden keinen Cross-Browser- / Cross-OS-Hack finden (ich kenne gar keinen für meinen eigenen Browser / OS). Die einzige Möglichkeit, etwas zu bekommen, wäre die [a] leistungsfähigere API, die Ihnen einen Anwendungszugriff auf das Browserfenster ermöglicht.

Die API, mit der der Status des Vollbilds programmgesteuert gesteuert werden kann, ist in fullscreen spec definiert, und ich hatte gehofft, dass es Licht ins Dunkel bringt Das Thema. Browser implementieren es noch nicht vollständig (z. B. document.exitFullscreen() ist nicht in Chrome implementiert und document.webkitExitFullscreen() gibt kein Promise zurück), aber es gibt Hinweise darauf, wohin die Dinge gehen. Leider wird die bereits vorhandene Vollbild-Browser-Funktion (die von F11 ausgelöste) nicht erwähnt, daher ist es schwierig zu sagen, wie sich dies entwickeln würde.

Im Moment sind F11-Vollbild und Programm-Vollbild zwei verschiedene Dinge, obwohl sie nicht vollständig voneinander isoliert sind. Auch auf MacOS zum Beispiel ist die "Vollbild" -Funktion des Browsers völlig anders, da es den gesamten Bildschirm ausfüllt, aber die Adressleiste und / oder Registerkarten immer noch angezeigt werden können.

Wenn Sie diese Demoseite für eine Bibliothek durchsuchen, die browserspezifische Implementierungen umschließt, sehen Sie Folgendes:

>
  • Beim programmatischen Festlegen von body oder eines beliebigen Elements im Vollbildmodus wendet der Browser spezielle CSS-Regeln (zB Hintergrund wird schwarz).
  • Dies passiert nicht mit F11-Vollbild
  • Dies passiert auch nicht mit programmatischem Vollbild im Dokument ( document.documentElement ), das ist also das, was Sie am besten von F11-Vollbild bekommen können.

Aber das macht F11-FS und programmatic-FS-on-doc-Elemente nicht gleich:

  • animierte Übergänge sind anders (und tatsächlich ein wenig klobig zum Beispiel in Firefox und Programmatic-Vollbild auf Dokumentelement, da es in Erwartung schwarzen Hintergrunds schwarz wird, aber wenn das Vollbildelement ein Dokument ist, gibt es keinen schwarzen Hintergrund oben)
  • Wenn F11-fullscreened, ist document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) falsch, aber wahr, wenn Programmatic-fullscreen-on-document-element (in Chrome & amp; Firefox & amp; IE11 verifiziert)
  • F11-Taste kann Programmatic-fullscreen beenden, aber programmatic-exitFullscreen kann F11-Vollbild nicht beenden . Welches Problem hast du? Außerdem kann die Esc-Taste den F11-Vollbildmodus nicht verlassen, beendet aber den Programmatic-Vollbildmodus.

Also, was sollen wir dann machen?

Da es zwei verschiedene Funktionen gibt, ist es vielleicht in Ordnung, sie zu belassen: Wenn Benutzer F11-Vollbild eingeben, werden sie wissen, wie sie durch erneutes Drücken der gleichen Taste beenden können. Wenn sie mit Ihren UI-Steuerelementen programmatically-fullscreen eingeben, stellen Sie sicher, dass Sie das Programm so offensichtlich beenden. Es könnte (verständlicherweise) frustrierend sein, wenn ein Entwickler nicht in der Lage ist, beide 100% zu kontrollieren, aber in der Praxis wird es den Benutzern wahrscheinlich gut gehen, da sie einen oder den anderen verwenden werden.

    
Hugues M. 05.06.2017, 12:06
quelle
2

Verwenden Sie shortcut.js, um die gedrückte Taste zu bearbeiten. Es ist gut.

Beispielcode:

%Vor%

Oder

JSFiddle Beispiel

    
Mateus Veloso 01.06.2017 15:47
quelle