Fuldskærm - JavaScript

JavaScript fullscreen API kan vise hele hjemmesiden eller et element fra hjemmesiden i fuldskærm. For eksempel et <video> eller <canvas> element

Introduktion

Når man i mange browsere trykker på F11 vises hjemmesiden i fuldskærm.

Derudover findes også JavaScript Fullscreen API som bruges til at vise hele hjemmesiden eller ét element fra hjemmesiden i fuldskærm.

For at komme ud at fuldskærm tilstand kan man typisk trykke på Esc eller F11 afhængig af hvad browser man bruger.

Demo

FULDSKÆRM DEMO
(PÅ EN SIDE FOR SIG SELV)
AFSPIL VIDEO I FULDSKÆRM DEMO
(PÅ EN SIDE FOR SIG SELV)

Browsertest

Event status område

Browserunderstøttelse af fuldskærm

Browser Method Property Event CSS
Firefox logo
Firefox 25.0
ja mozRequestFullScreen()
mozCancelFullScreen()
document.mozFullScreen
document.mozFullScreenEnabled
document.mozFullScreenElement
mozfullscreenchange :-moz-full-screen
Opera logo
Opera 17.0
ja webkitRequestFullScreen()
webkitRequestFullscreen()
webkitCancelFullScreen()
webkitExitFullscreen()
document.webkitIsFullScreen
document.webkitFullscreenEnabled
webkitfullscreenchange :-webkit-full-screen
Safari logo
Safari 5.1.7
ja webkitRequestFullScreen()
webkitCancelFullScreen()
document.webkitIsFullScreen webkitfullscreenchange :-webkit-full-screen
Chrome logo
30.0.1599.69 m
ja webkitRequestFullScreen()
webkitRequestFullscreen()
webkitCancelFullScreen()
webkitExitFullscreen()
document.webkitFullscreenEnabled
document.webkitFullscreenElement
document.webkitIsFullScreen
webkitfullscreenchange :-webkit-full-screen
Internet Explorer logo
Internet Explorer 11.0.9600.16428
1
ja msRequestFullscreen()
msExitFullscreen()
document.msFullscreenElement
document.msFullscreenEnabled
MSFullscreenChange
MSFullscreenError
:-ms-fullscreen
::-ms-backdrop
Alle tests er udført på Windows 7 (64-bit)


Bemærk at der er forskel på Fullscreen (med lille s) og FullScreen (med stort S).

1 Ser ikke ud til at kunne udløse fuldskærm gennem mousedown eventen men gerne mouseup eventen.
Browserunderstøttelse fra caniuse.com :

Kode

Fullscreen API'et er ret nyt så der er lidt forskel på koden til de forskellige browsere indtil browserne følger standarden.

Her ses hvordan man... Aktiver fuldskærm for hele hjemmesiden.

Her ses hvordan man... Aktiver fuldskærm for ét element.

Her ses hvordan man... Forlader fuldskærm.

Her ses hvordan man... Kontroller om browseren er i fuldskærm.

Her ses hvordan man... Kontroller om browseren har tilladelse til at gå i fuldskærm.


document.fullscreenElement returner null hvis browseren ikke er i fuldskærm tilstand.
document.fullscreenElement returner noget andet end null hvis browseren er i fuldskærm tilstand.

Fuldskærm i iframe

Som standard må en <iframe> ikke gå i fuldskærm men allowfullscreen attributten giver tilladelse til det.

Se også <iframe>.

CSS

Her er noget CSS som jeg endnu ikke har testet så meget endnu.


Chrome viser som standard elementet i samme størrelse i fuldskærm som når det ikke er i fuldskærm.
Hvis man ønsker at strække elementet til at fylde hele skærmen i fuldskærm så kan man bruge følgende CSS kode.

Scrollbar er væk i fuldskærm

Scrollbarene forsvinder af en eller anden grund når fuldskærm aktiveres med requestFullScreen.
I modsætning til når man trykker på F11 hvor scrollbarene stadig er der.

Jeg ved ikke om det er meningen man skal lave noget CSS overflow kode sådan at der kommer scrollbarer.
Men det er lidt irriterende fordi browseren hopper også op i toppen af siden selvom man aktivede requestFullScreen mens man var længede nede på siden. Og da man ikke kan scrolle så kan man kun se det øverste af hjemmesiden.

Browseren kan gå ud af fuldskærm når man i fuldskærm tilstand besøger et link.

I en tidligere version af Firefox kunne man med document.documentElement.mozRequestFullScreen komme i fuldskærm med scrollbarer.

Tastatur i fuldskærm

Det er noget med at de fleste taster på tastaturet som standard er deaktiveret i fuldskærm tilstand.
Det skulle vist være fordi det kan udgøre en sikkerhedsrisiko.
For eksempel hvis hjemmesiden går i fuldskærm og efterligner browserens udseende også brugeren indtaster sit kodeord eller sådan noget.

Det skulle så være muligt at starte fuldskærm tilstand med hele tastaturet til rådighed eller sådan noget.
Jeg ved endnu ikke rigtig noget om dette endnu.

Bruger-event

Det lader til at browserne med vilje har gjort så man kun kan gå i fuldskærm ved en såkaldt "bruger-event" som for eksempel "click" når der klikkes med musen men ikke ved "playing" når videoen starter med at afspille.

Det vil sige man kan ikke kombinere videoens "playing" event med aktivering af fuldskærm (selvom de virker hver for sig) fordi "playing" eventen er ikke udløst direkte af brugeren.

"pause" eventen kan dog godt kombineres med deaktivering af fuldskærm i for eksempel Safari 5.1.5 og Chrome 30.

Forsøger man at aktiver fuldskærm ved "playing" eventen så får man følgende besked i Firefox 17.0.1 når "videoelement.mozRequestFullScreen();" kaldes :
Fuld skærm blev nægtet, fordi Element.mozRequestFullScreen() ikke blev kaldt fra en hurtig, brugergenereret event handler.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.