Bundet med HTML5 kom et stort antall API godhet, og en av de beste var fullskjerm API som gir en innfødt måte for nettleseren å gjøre det som bare var mulig i flash i lang tid: vise nettsiden i fullskjermmodus for brukeren.
Dette kommer til nytte hvis du viser video eller bilder, eller hvis du utvikler et spill. Faktisk kan innhold som må fokuseres på, ha nytte av fullskjerm-APIen.
Og best av alt, fullskjerm API er veldig enkelt å bruke ...
En rekke metoder er en del av fullskjerm API:
element.requestFullScreen()Denne metoden tillater et enkelt element å gå i fullskjerm.
Document.getElementById(“myCanvas”).requestFullScreen()Dette vil føre til at lerretet med ID 'myCanvas' kan gå i fullskjerm.
document.cancelFullScreen()Dette går ut av fullskjermmodus og går tilbake til dokumentvisningen.
Document.fullScreenDette kommer tilbake sant hvis brukeren er i fullskjermmodus.
document.fullScreenElementReturnerer elementet som er i fullskjermmodus.
Vær oppmerksom på at disse er standardmetoder, men for øyeblikket trenger du leverandørprefikser for å gjøre dette arbeidet i Chrome, Firefox og Safari (Internet Explorer og Opera støtter ikke denne API-en for øyeblikket).
Siden vi først må finne ut hvilken metode nettleseren gjenkjenner, vil vi opprette en funksjon som finner den riktige metoden for nettleseren og kalles 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 funksjonen, er det å se om noen av requestFullScreen-metodene returnerer sanne og da kaller den funksjonen for den riktige nettleseren ved hjelp av leverandør prefiks.
Etter alt vi trenger å gjøre er å ringe fullskjerm-funksjonen slik:
//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 melding til brukeren som ber om tillatelse til å gå i fullskjerm. Hvis det er akseptert, vil alle verktøylinjer i nettleseren forsvinne, og det eneste på skjermen vil være ønsket nettside eller enkeltelementet.
Denne metoden krever også leverandørprefikser, så vi vil bruke den samme ideen som ovenfor og opprette en funksjon som bestemmer hvilket prefiks vi skal bruke i henhold til brukerens nettleser.
En ting du vil legge merke til er at denne metoden ikke trenger noen elementer passert fordi i motsetning til requestFullScreen-metoden gjelder det alltid 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();Bundet sammen med denne JavaScript-APIen kom en CSS pseudoklasse som heter: fullskjerm, og dette kan brukes til å stilte noen elementer på nettsiden når den er i fullskjermmodus. Dette kan komme til nytte fordi nettlesestørrelsen øker litt når den er inne fullskjerm-modus.
/* 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 oppmerksom på at du ikke kan skille leverandørprefiksetene med kommaer fordi nettleseren ikke vil lese dem:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}For at stilene skal kunne brukes riktig må du plassere hvert leverandør prefiks i sin egen blokk.
Denne JavaScript-API er en av de minst kjente som leveres med HTML5, men etter min mening er det både effektivt og enkelt å implementere. Den forbedrede brukeropplevelsen med fokus på et enkelt element, spesielt for video, bilder og spill, er vel verdt de få kodelinjene som er involvert.
Har du implementert Fullscreen API hvor som helst? Hvilke bruksområder kan du tenke på for det? Gi oss beskjed i kommentarene.