Gebundeld met HTML5 kwam een groot aantal API-goedheden en een van de beste was de Fullscreen API die een native manier biedt voor de browser om te doen wat alleen mogelijk was in de flash-modus voor een lange tijd: toon de webpagina in volledig scherm voor de gebruiker.
Dit is handig als u video's of afbeeldingen weergeeft of als u een game aan het ontwikkelen bent. Alle inhoud waarop moet worden scherpgesteld, kan zelfs profiteren van de Fullscreen-API.
En het beste van alles is dat de Fullscreen-API heel gemakkelijk te gebruiken is ...
Een aantal methoden maakt deel uit van de Fullscreen API:
element.requestFullScreen()Met deze methode kan een enkel element op volledig scherm worden weergegeven.
Document.getElementById(“myCanvas”).requestFullScreen()Dit zorgt ervoor dat het canvas met de ID 'myCanvas' op volledig scherm wordt weergegeven.
document.cancelFullScreen()Hierdoor wordt de modus Volledig scherm eenvoudig afgesloten en keert u terug naar de documentweergave.
Document.fullScreenHierdoor wordt true geretourneerd als de gebruiker zich in de modus Volledig scherm bevindt.
document.fullScreenElementRetourneert het element dat zich momenteel in de modus Volledig scherm bevindt.
Merk op dat dit de standaardmethoden zijn, maar voorlopig hebt u voorvoegsels van leveranciers nodig om dit in Chrome, Firefox en Safari te laten werken (Internet Explorer en Opera ondersteunen deze API momenteel niet).
Aangezien we eerst moeten uitvinden welke methode de browser herkent, zullen we een functie aanmaken die de juiste methode voor de browser zal vinden en de call it:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Zoals u kunt zien is al deze functie te zien of een van de requestFullScreen-methoden waar retourneert en vervolgens de functie oproept voor de juiste browser met behulp van de prefix van de leverancier.
Hierna hoeven we alleen maar de fullScreen-functie te bellen zoals:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Hiermee wordt een prompt verzonden naar de gebruiker die toestemming vraagt om naar volledig scherm te gaan. Als deze is geaccepteerd, verdwijnen alle werkbalken in de browser en is het enige dat op het scherm verschijnt de gewenste webpagina of het afzonderlijke element.
Deze methode vereist ook voorvoegsels van leveranciers. Daarom gebruiken we hetzelfde idee als hierboven en maken we een functie die bepaalt welke prefix we volgens de browser van de gebruiker moeten gebruiken.
Een ding dat je zal opvallen, is dat deze methode geen elementen nodig heeft, want in tegenstelling tot de requestFullScreen-methode is deze altijd van toepassing op het hele document.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Gebundeld met deze JavaScript-API kwam een CSS pseudo-klasse met de naam: full-screen en dit kan worden gebruikt om alle elementen in de webpagina op te maken als deze in de modus Volledig scherm staat, dit kan van pas komen omdat de browser in de browser een klein beetje toeneemt volledig scherm.
/* 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%;}Houd er rekening mee dat u de prefixen van leveranciers niet kunt scheiden met komma's, omdat de browser deze niet kan lezen:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Om de stijlen correct toe te passen, moet u elk leveranciersprefix in zijn eigen blok plaatsen.
Deze JavaScript-API is een van de minst bekende die wordt geleverd met HTML5, maar naar mijn mening is het zowel effectief als eenvoudig te implementeren. De verbeterde gebruikerservaring van het focussen op een enkel element, vooral voor video, afbeeldingen en games, is zeker de moeite waard om de paar regels code te gebruiken.
Hebt u de Fullscreen-API overal geïmplementeerd? Welke toepassingen kun je hiervoor bedenken? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, focus afbeelding via Shutterstock.