Mit HTML5 gebündelt kamen zahlreiche API-Vorteile mit, und eine der besten war die Fullscreen-API, die dem Browser eine native Möglichkeit bietet, das zu tun, was lange Zeit nur in Flash möglich war: die Webseite für den Benutzer im Vollbildmodus anzuzeigen.
Dies ist praktisch, wenn Sie Videos oder Bilder anzeigen oder ein Spiel entwickeln. Tatsächlich kann jeder Inhalt, auf den man sich konzentrieren muss, von der Fullscreen-API profitieren.
Und das Beste ist, dass die Fullscreen-API wirklich einfach zu verwenden ist …
Die Methoden
Eine Reihe von Methoden sind Teil der Fullscreen-API:
element.requestFullScreen()
Mit dieser Methode kann ein einzelnes Element im Vollbildmodus angezeigt werden.
Document.getElementById(“myCanvas”).requestFullScreen()
Dadurch wird die Leinwand mit der ID „myCanvas“ im Vollbildmodus angezeigt.
document.cancelFullScreen()
Dadurch wird einfach der Vollbildmodus verlassen und zur Dokumentansicht zurückgekehrt.
Document.fullScreen
Dies gibt true zurück, wenn sich der Benutzer im Vollbildmodus befindet.
document.fullScreenElement
Gibt das Element zurück, das sich derzeit im Vollbildmodus befindet.
Beachten Sie, dass dies die Standardmethoden sind. Sie benötigen jedoch vorerst Herstellerpräfixe, damit dies in Chrome, Firefox und Safari funktioniert (Internet Explorer und Opera unterstützen diese API derzeit nicht).
Vollbildmodus starten
Da wir zunächst herausfinden müssen, welche Methode der Browser erkennt, erstellen wir eine Funktion, die die richtige Methode für den Browser findet und rufen sie auf:
//Hilfsfunktion
Funktion fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
Wie Sie sehen, prüft diese Funktion lediglich, ob eine der requestFullScreen-Methoden „true“ zurückgibt, und ruft dann die Funktion für den richtigen Browser unter Verwendung des Herstellerpräfixes auf.
Danach müssen wir nur noch die FullScreen-Funktion wie folgt aufrufen:
//für die ganze Seite
var html = document.documentElement;
Vollbild(html); // Für ein bestimmtes Element auf der Seite
var canvas = document.getElementById(‘mycanvas’);
Vollbild (Leinwand);
Dadurch wird eine Aufforderung an den Benutzer gesendet, in der er um Erlaubnis zum Vollbildmodus gebeten wird. Wenn dies akzeptiert wird, verschwinden alle Symbolleisten im Browser und das Einzige, was auf dem Bildschirm angezeigt wird, ist die gewünschte Webseite oder das einzelne Element.
Vollbildmodus abbrechen
Diese Methode erfordert auch Herstellerpräfixe, daher verwenden wir die gleiche Idee wie oben und erstellen eine Funktion, die bestimmt, welches Präfix wir je nach Browser des Benutzers verwenden sollten.
Sie werden feststellen, dass für diese Methode keine übergebenen Elemente erforderlich sind, da sie im Gegensatz zur Methode „requestFullScreen“ immer auf das gesamte Dokument angewendet wird.
// die Hilfsfunktion
Funktion fullScreenCancel() {
if(document.requestFullScreen) {
document.requestFullScreen();
} else if(document .webkitRequestFullScreen ) {
document.webkitRequestFullScreen();
} else if(document .mozRequestFullScreen) {
document.mozRequestFullScreen();
}
}
// Vollbild abbrechen
fullScreenCancel();
Die CSS-Pseudoklasse
Mit dieser JavaScript-API wurde eine CSS-Pseudoklasse mit dem Namen „:full-screen“ geliefert, mit der beliebige Elemente auf der Webseite im Vollbildmodus gestaltet werden können. Dies kann nützlich sein, da die Browsergröße im Vollbildmodus etwas zunimmt Vollbildmodus.
/* Etwas im Körper verändern */
:-webkit-full-screen {
Schriftgröße: 16px;
}
:-moz-full-screen {
Schriftgröße: 16px;
} /*Nur ein Element*/
:-webkit-full-screen img {
Breite: 100 %;
Höhe: 100 %;
}
:-moz-full-screen img {
Breite: 100 %;
Höhe: 100 %;
}
Beachten Sie, dass Sie die Herstellerpräfixe nicht durch Kommas trennen können, da der Browser sie nicht lesen kann:
/* Das wird nicht funktionieren */
:-webkit-full-screen img,:-moz-full-screen img {
Breite: 100 %;
Höhe: 100 %;
}
Damit die Stile ordnungsgemäß angewendet werden, müssen Sie jedes Herstellerpräfix in einem eigenen Block platzieren.
Abschluss
Diese JavaScript-API ist eine der am wenigsten bekannten, die mit HTML5 ausgeliefert wurde, aber meiner Meinung nach ist sie sowohl effektiv als auch einfach zu implementieren. Die verbesserte Benutzererfahrung durch die Konzentration auf ein einzelnes Element, insbesondere bei Videos, Bildern und Spielen, ist die wenigen Codezeilen wert, die dafür erforderlich sind.
Haben Sie die Fullscreen-API irgendwo implementiert? Welche Verwendungsmöglichkeiten fallen Ihnen dafür ein? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Bild fokussieren über Shutterstock.
