Bundet med HTML5 kom et stort antal API godhed, og en af de bedste var fuldskærm API, der giver en browser mulighed for at gøre det, der kun var muligt i flash i lang tid: Vis websiden i fuldskærmstilstand til brugeren.
Dette er nyttigt, hvis du viser video eller billeder, eller hvis du udvikler et spil. Faktisk kan ethvert indhold, der skal fokuseres på, få gavn af API'en med fuldskærm.
Og bedst af alt, er fuldskærms-API'en virkelig nem at bruge ...
En række metoder er en del af API'en til fuldskærm:
element.requestFullScreen()Denne metode gør det muligt for et enkelt element at gå i fuldskærm.
Document.getElementById(“myCanvas”).requestFullScreen()Dette vil medføre, at lærredet med ID'et myCanvas 'kan gå i fuldskærm.
document.cancelFullScreen()Dette forlader simpelthen fuldskærmstilstand og vender tilbage til dokumentvisningen.
Document.fullScreenDette vil returnere sandt, hvis brugeren er i fuldskærmstilstand.
document.fullScreenElementReturnerer elementet, der aktuelt er i fuldskærmstilstand.
Bemærk, at disse er standardmetoderne, men i øjeblikket skal du bruge sælgerpræfikser for at gøre dette arbejde i Chrome, Firefox og Safari (Internet Explorer og Opera understøtter ikke dette API i øjeblikket).
Siden først skal vi finde ud af, hvilken metode browseren genkender, vil vi oprette en funktion, der finder den rigtige metode til browseren og kalder den:
//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 hele denne funktion, ser man om nogen af requestFullScreen-metoderne returnerer sande, og så kalder den funktionen til den korrekte browser ved hjælp af sælgerens præfiks.
Efter alt, hvad vi skal gøre er at kalde fuldskærmfunktionen som sådan:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Dette vil sende en prompt til brugeren, der anmoder om tilladelse til at gå i fuldskærm, hvis det accepteres, vil alle værktøjslinjer i browseren forsvinde, og det eneste på skærmen er den ønskede webside eller det enkelte element.
Denne metode kræver også sælgerpræfikser, så vi bruger den samme idé som ovenfor og opretter en funktion, der bestemmer hvilket præfiks vi skal bruge i henhold til brugerens browser.
Én ting du vil bemærke er, at denne metode ikke behøver nogen elementer bestået, fordi det i modsætning til requestFullScreen-metoden altid gælder for hele 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();Bundtet med denne JavaScript API kom en CSS pseudoklasse kaldet: fuldskærm, og dette kan bruges til at indstille alle elementer på websiden, når det er i fuldskærmstilstand. Dette kan være nyttigt, fordi browsestørrelsen stiger lidt, når den er i fuldskærmstilstand.
/* 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%;}Vær opmærksom på, at du ikke kan adskille sælgerpræfikserne med kommaer, fordi browseren ikke læser dem:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}For at de stilarter, der skal anvendes korrekt, skal du placere alle sælgerens præfiks i sin egen blok.
Denne JavaScript API er en af de mindst kendte, der leveres sammen med HTML5, men efter min mening er det både effektivt og enkelt at implementere. Den forbedrede brugeroplevelse med fokus på et enkelt element, især til video, billeder og spil, er værd at de få linjer kode involveret.
Har du implementeret Fullscreen API overalt? Hvilke anvendelser kan du tænke på for det? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, fokus billede via Shutterstock.