Weblabor

Flash esetén már nagyon régóta lehetőségünk van teljes képernyőre lépni a teljesebb élményhez, s bár a legtöbb böngészőben is volt már lehetőség „kézzel” teljes képernyőre váltani, a HTML/JavaScript interfész mindeddig váratott magára. A Fullscreen API egy elég friss dolog, a W3C-s javaslat mindössze egy hónapja jelent meg.

A Fullscreen API egyelőre még csak vázlat formájában érhető el a W3C-nél, a szorosan vett HTML 5 ajánlásban még nem szerepel. Mivel vázlatról van szó, ezért még előfordulhatnak kisebb-nagyobb változtatások, de ennek ellenére már egész jó a böngésző támogatottsága: a Firefox, a Chrome és a Safari is támogatja (lásd a bejegyzés vége fele bővebben). Bár a draft egyik szerkesztője operás, az Opera egyelőre még nem támogatja a lehetőséget, és azt sem tudni, hogy az Internet Explorerben mikor fog megjelenni.

Irány a teljes képernyő

A teljes képernyőre váltás egy JavaScript függvényhívással lehetséges. A javaslat szerint egy DOM elemen a requestFullscreen() meghívásával tudunk váltani, a böngészők a szokásos prefixekkel teszik ezt elérhetővé. A teljes dokumentum, vagyis a document.body esetében így alakul a kód:

if (document.body.requestFullscreen) {
    document.body.requestFullscreen();
} else if (document.body.mozRequestFullScreen) {
    document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullScreen) {
    document.body.webkitRequestFullScreen();
}

Az 1. sorban a szabvány szerinti mód, a 3.-ban a Firefox-féle hívás, az 5.-ben pedig a Chrome és Safari megoldást láthatjuk. Vegyük észre, hogy míg a szabvány a Fullscreen S betűjét kisbetűvel írja, addig a böngészők (logikusan) nagybetűvel valósították meg (és tényleg ez tűnik a jobb megoldásnak).

A teljes képernyős módból kilépés a document elemen meghívott exitFullscreen() függvény segítségével lehetséges, a böngészőgyártók viszont a cancelFullScreen() mellett tették le voksukat:

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

Biztonság

A teljes képernyős nézetnél biztonsági problémák is felmerülnek, hiszen könnyedén összerakható egy olyan weboldal, mely egy operációs rendszer bejelentkező képernyőjét utánozza, megtévesztve ezzel a felhasználót, aki így például beírhatja jelszavát. Emiatt – egyelőre – alapból le van tiltva a billentyűzet, s csak az egér használható. Chrome esetén külön paraméter átadásával kell kérni, hogy működjön a billentyűzet: webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT), a Firefox pedig egy másik metódust ad: mozRequestFullScreenWithKeys(). Várhatóan a konkrét megoldás és működés alakul majd még a jövőben, például hiába kell külön kérni a billentyűzet Chrome alatt, semmilyen különbséget, figyelmeztetést nem tapasztaltam a két állapot között. A Firefox már okosabb, pár billentyű kivételével kapunk egy figyelmeztető üzenetet az arcunkba (azok a billentyűk, ahol nem, alkalmasak viszont játék vezérlésre vagy hasonlóra).

CSS kiválasztók és JavaScript események

A teljes képernyős állapothoz kapunk CSS kiválasztót, JavaScript eseményt és állapot lekérdezhetőséget is, így dinamikusan alakíthatjuk a megjelenést, illetve reagálhatunk az állapotváltozásokra.

A CSS kiválasztók így néznek ki:

html:fullscreen,
html:full-screen,
html:-moz-full-screen,
html:-webkit-full-screen {
    background: red;
}

A 2. sorban szereplő kiválasztó jelenleg egyik böngészőben sem működik, de ez lehet a végleges nyertes, legalábbis a böngésző gyártók ezen az állásponton vannak.

A JavaScript eseményeket a szabványos addEventListener() segítségével kezelhetjük le, az aktuális állapotot pedig a document.fullscreen tulajdonság segítségével érhetjük el:

function onFullScreenChange() {
  var state = document.fullscreen || document.fullScreen || document.mozFullScreen || document.webkitFullScreen;
  // állapot feldolgozása
}
document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);

Támogatás

1. A Mozilla egy javaslat formájában tette közzé gondolatait a teljes képernyős módról: . Érdemes elolvasni, mert bővebb, mint az összefoglalóm.
2. A teljes képernyős támogatás elsőként a Safari 5-ben jelent meg, azonban csak a video elemmel működött. Az 5.1-es változattól kezdve már minden elemre működik.
3. A W3C is kihozta a fentebb linkelt dokumentumot.
4. A Chrome 15 és a nemrég megjelent Firefox 10 is támogatja a lehetőséget.

A többi böngészővel kapcsolatosan még semmi konkrétum nincs. Az iOS eszközök már támogatják a fentebb írtakat.

Hogyan tovább?

A Mozillánál lehet olvasni egy átfogó leírást: Using full-screen mode, illetve egy korrekt Fullscreen API demó is kipróbálható.