Soubor s kódem HTML5 přinesl velké množství dobrých informací o API a jeden z nejlepších je rozhraní Fullscreen API, které poskytuje přirozenému způsobu, jak může prohlížeč provádět to, co bylo možné v blesku pouze dlouhou dobu: zobrazovat webovou stránku v režimu celé obrazovky pro uživatele.
To je užitečné, pokud zobrazujete video nebo obrázky nebo vyvíjíte hru. Ve skutečnosti může být veškerý obsah, na který je třeba se zaměřit, využívat rozhraní Fullscreen API.
A nejlepší ze všech, rozhraní Fullscreen API je opravdu snadné ...
Řada metod je součástí rozhraní API na celou obrazovku:
element.requestFullScreen()Tato metoda umožňuje jedinému prvku přejít na celou obrazovku.
Document.getElementById(“myCanvas”).requestFullScreen()To způsobí, že se plátno s ID "myCanvas" dostane na celou obrazovku.
document.cancelFullScreen()Tím se jednoduše ukončí režim celé obrazovky a vrátí se do zobrazení dokumentu.
Document.fullScreenPokud se uživatel nachází v režimu celé obrazovky, vrátí se to pravda.
document.fullScreenElementVrací element, který je aktuálně v režimu celé obrazovky.
Všimněte si, že se jedná o standardní metody, ale prozatím budete potřebovat předpony dodavatelů, aby to fungovalo v prohlížečích Chrome, Firefox a Safari (aplikace Internet Explorer a Opera nepodporují tento API v současné době).
Protože nejprve musíme zjistit, jakou metodu prohlížeč rozpozná, vytvoříme funkci, která najde správnou metodu pro prohlížeč a jeho volání:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Jak můžete vidět všechny tyto funkce, zjistíte, zda některá z metod requestFullScreen vrátí true a poté volá funkci pro správný prohlížeč pomocí předpony dodavatele.
Poté je potřeba zavolat funkci fullScreen takto:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Tím se pošle výzva uživateli, který požádá o povolení k přechodu na celou obrazovku, pokud je přijatelné, že všechny panely nástrojů v prohlížeči zmizí a jediná věc na obrazovce bude požadovaná webová stránka nebo jediný prvek.
Tato metoda také vyžaduje předpony dodavatelů, takže použijeme stejný nápad jako výše a vytvoříme funkci, která určí, který prefix bychom měli používat podle prohlížeče uživatele.
Jedna věc, kterou si všimnete, je, že tato metoda nepotřebuje žádné předané prvky, protože na rozdíl od metody requestFullScreen se vždy vztahuje na celý dokument.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();K tomuto rozhraní API jazyka JavaScript byl přidán pseudotřída CSS zvaná: celoobrazovková obrazovka, která může být použita ke stylování všech prvků webové stránky, když je v režimu celé obrazovky, může to být užitečné, protože velikost prohlížeče se v některých případech zvýší Režim celé obrazovky.
/* 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%;}Uvědomte si, že předpony dodavatelů nelze oddělit čárkami, protože je prohlížeč nebude číst:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Aby byly styly správně aplikovány, musíte umístit každý prefix dodavatele v jeho vlastním bloku.
Toto rozhraní API jazyka JavaScript je jedno z nejméně známých, které bylo dodáno s HTML5, ale podle mého názoru je to jak efektivní, tak i jednoduché. Vylepšená uživatelská zkušenost zaměřená na jediný prvek, zvláště pro video, obrázky a hry, stojí za to, aby pár řádků kódu zahrnoval.
Aplikovali jste rozhraní API na celou obrazovku kdekoli? K čemu se na to může zajímat? Dejte nám vědět v komentářích.