Im Bundle mit HTML5 gab es eine große Anzahl von API-Tugenden und eine der besten war die Vollbild-API, die dem Browser eine native Möglichkeit bietet, das zu tun, was lange nur in Flash möglich war: Anzeige der Webseite im Vollbildmodus für den Benutzer.
Dies ist nützlich, wenn Sie Videos oder Bilder anzeigen oder wenn Sie ein Spiel entwickeln. In der Tat kann jeder Inhalt, auf den fokussiert werden muss, von der Vollbild-API profitieren.
Und das Beste: Die Fullscreen-API ist wirklich einfach zu bedienen ...
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 der Zeichenbereich mit der ID "myCanvas" im Vollbildmodus angezeigt.
document.cancelFullScreen()Dies beendet einfach den Vollbildmodus und kehrt zur Dokumentansicht zurück.
Document.fullScreenDies wird wahr zurückgegeben, wenn der Benutzer im Vollbildmodus ist.
document.fullScreenElementGibt das Element zurück, das sich derzeit im Vollbildmodus befindet.
Beachten Sie, dass dies die Standardmethoden sind, aber für die Zeit werden Sie Herstellerpräfixe benötigen, damit dies in Chrome, Firefox und Safari funktioniert (Internet Explorer und Opera unterstützen diese API derzeit nicht).
Da wir zuerst herausfinden müssen, welche Methode der Browser erkennt, erstellen wir eine Funktion, die die richtige Methode für den Browser findet und ihn aufruft:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Wie Sie sehen können, wird diese Funktion überprüft, ob eine der requestFullScreen-Methoden "true" zurückgibt und dann die Funktion für den richtigen Browser unter Verwendung des Vendor-Präfixes aufruft.
Danach müssen wir nur noch die fullScreen-Funktion aufrufen:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Dies wird eine Aufforderung an den Benutzer senden, um die Erlaubnis zu erhalten, Vollbild zu sehen, wenn es akzeptiert wird, werden alle Symbolleisten im Browser verschwinden und das einzige auf dem Bildschirm wird die gewünschte Webseite oder das einzelne Element sein.
Diese Methode erfordert auch Anbieterpräfixe. Daher verwenden wir dieselbe Idee wie oben und erstellen eine Funktion, die bestimmt, welches Präfix wir gemäß dem Browser des Benutzers verwenden sollen.
Eine Sache, die Sie bemerken werden, ist, dass diese Methode keine Elemente benötigt, da sie im Gegensatz zur requestFullScreen-Methode immer auf das gesamte Dokument angewendet wird.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Gebündelt mit dieser JavaScript-API kam eine CSS-Pseudoklasse mit dem Namen: Vollbild, mit der beliebige Elemente auf der Webseite im Vollbildmodus formatiert werden können. Dies kann nützlich sein, da die Browsergröße in diesem Fall etwas zunimmt Vollbildmodus.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Beachten Sie, dass Sie die Hersteller-Präfixe nicht mit Kommas trennen können, da der Browser sie nicht lesen kann:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Damit die Stile ordnungsgemäß angewendet werden können, müssen Sie jedes Lieferantenpräfix in einen eigenen Block einfügen.
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 des Fokussierens auf ein einzelnes Element, besonders für Video, Bilder und Spiele, ist die wenigen Codezeilen wert, die involviert sind.
Haben Sie die Fullscreen API überall implementiert? Was nützt dir das? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Fokusbild über Shutterstock.