Bundet med HTML5 kom ett stort antal API godis och ett av de bästa var Fullscreen API som ger ett inbyggt sätt för webbläsaren att göra vad som bara var möjligt i flash under en lång tid: visa webbsidan i helskärmsläge för användaren.
Det här är till nytta om du visar video eller bilder, eller om du utvecklar ett spel. Faktum är att allt innehåll som behöver fokuseras kan dra nytta av API: n med fullskärm.
Och bäst av allt är Fullscreen API verkligen lätt att använda ...
Ett antal metoder ingår i Fullscreen API:
element.requestFullScreen()Med den här metoden kan ett enskilt element gå i fullskärm.
Document.getElementById(“myCanvas”).requestFullScreen()Detta kommer att göra att duken med ID 'myCanvas' kan gå i fullskärm.
document.cancelFullScreen()Detta avslutas helt och hållet i helskärmsläge och återgår till dokumentvyn.
Document.fullScreenDetta kommer att returneras sant om användaren är i helskärmsläge.
document.fullScreenElementReturnerar det element som för närvarande är i helskärmsläge.
Observera att det här är standardmetoderna men för tillfället behöver du prefix för leverantörer för att göra det här arbetet i Chrome, Firefox och Safari (Internet Explorer och Opera stöder inte detta API för närvarande).
Sedan vi först måste ta reda på vilken metod webbläsaren känner igen skapar vi en funktion som hittar rätt metod för webbläsaren och kallar det:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Som du kan se hela den här funktionen ser du om någon av requestFullScreen-metoderna returnerar sanna och då ringer den funktionen till rätt webbläsare med dess leverantörs prefix.
Efter allt vi behöver göra är att ringa fullscreen-funktionen som så:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Detta kommer att skicka en prompt till användarbegäran om att gå till fullskärm, om det accepteras alla verktygsfält i webbläsaren kommer att försvinna och det enda på skärmen blir den önskade webbsidan eller det enkla elementet.
Denna metod kräver också leverantörs prefix, så vi kommer att använda samma idé som ovan och skapa en funktion som bestämmer vilket prefix vi ska använda enligt användarens webbläsare.
En sak som du kommer att märka är att den här metoden inte behöver några element som passerat eftersom det i motsats till requestFullScreen-metoden alltid gäller hela dokumentet.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();Bifogat med detta JavaScript-API kom en CSS-pseudoklass kallad: fullskärm och det här kan användas för att ställa in alla element på webbsidan när det är i helskärmsläge. Detta kan vara användbart eftersom webbläsarens storlek ökar lite när fullskärmsläge.
/* 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%;}Var medveten om att du inte kan skilja säljarprefix med kommatecken eftersom webbläsaren inte läser dem:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}För att stilar ska tillämpas korrekt måste du placera varje leverantörs prefix i det egna blocket.
Detta JavaScript API är en av de minst kända som levereras med HTML5, men enligt min mening är det både effektivt och enkelt att implementera. Den förbättrade användarupplevelsen med fokus på ett enda element, särskilt för video, bilder och spel är väl värt de få raderna av kod som är inblandade.
Har du implementerat Fullscreen API någonstans? Vilka användningsområden kan du tänka på för det? Låt oss veta i kommentarerna.