Dnes v práci som narazil na potrebu zobrazenia webovej stránky na celú obrazovku, tak som skontroloval Baidu a našiel som plugin jQuery na zobrazenie webových stránok na celú obrazovku: jquery FullScreen Plugin. Umožňuje zobrazenie webových stránok na celú obrazovku pre rôzne prehliadače, vrátane FF 10, Chrome a Safari, a slúži na poskytnutie čitateľnejšej verzie webovej stránky, ktorú je možné škálovať <canvas>a <video>detailne upravovať.
jQuery Fullscreen plugin
Popis
Tento plugin jQuery poskytuje jednoduchý mechanizmus na ovládanie nového režimu na celú obrazovku moderných prehliadačov. Momentálne túto novú funkciu na celú obrazovku poskytujú len novšie prehliadače založené na Webkitoch (ako Chrome a Safari), Firefox a IE11+.
Použitie
Vstup do režimu celej obrazovky
Môžete prepnúť celú stránku alebo jeden HTML prvok do režimu celej obrazovky:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Toto funguje len vtedy, keď bol kód spustený interakciou používateľa (napríklad udalosť na kliknutie na tlačidlo). Prehliadače neumožňujú vstup do režimu celej obrazovky bez interakcie používateľa.
Ukončenie režimu celej obrazovky
Režim celej obrazovky sa vždy ukončí cez dokument, ale tento plugin to umožňuje aj cez akýkoľvek HTML prvok. Vlastnícky dokument vybraného HTML prvku sa potom použije:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Dotazovanie režimu na celú obrazovku
Jednoducho neposielajte žiadny argument do metódy fullScreen na dotazovanie aktuálneho stavu. Metóda vráti aktuálny prvok na celú obrazovku (alebo true, ak to prehliadač nepodporuje), keď je režim celej obrazovky aktívny, false ak nie je aktívny, alebo null, ak prehliadač nepodporuje celú obrazovku vôbec. Takže túto metódu môžete použiť aj na zobrazenie tlačidla na celú obrazovku len vtedy, keď prehliadač podporuje režim celej obrazovky:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Prepínanie režimu na celú obrazovku
Plugin poskytuje ďalšiu metódu jednoduchého prepínania režimu na celú obrazovku:
$(document).toggleFullScreen();
Upozornenia
Plugin spustí udalosť zmeny celej obrazovky v dokumente, keď sa režim celej obrazovky zmení. Ak prehliadač zamietol zmenu stavu celej obrazovky, plugin spustí udalosť fullscreenerror v dokumente. Príklad:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " zapnuté": "vypnuté"));
});
$(document).bind("fullscreenerror", function() {
alert("Prehliadač zamietol zmenu na celú obrazovku");
});
Fullscreen iframe
Vstup do režimu celej obrazovky priamo v iframe nie je štandardne povolený, ale dá sa povoliť pomocou niekoľkých atribútov na iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Známe problémy
V IE 11 sa pri vstupe do celej obrazovky z iframu zobrazí prázdna stránka. Netuším prečo. Každá pomoc je vítaná.
V Safari (aspoň v Safari 7) nie je v režime celej obrazovky povolený vstup z klávesnice.
GitHub adresa: https://github.com/kayahr/jquery-fullscreen-plugin
Turisti, ak chcete vidieť skrytý obsah tohto príspevku, prosím. Odpoveď
| 
Zverejnené 14. 8. 2017 16:34:52
|
|
|
Zverejnené 14. 8. 2017 17:08:18
|
Zverejnené 25. 11. 2017 14:35:17
|
