Dnes v práci jsem narazil na potřebu zobrazení webové stránky na celé obrazovce, tak jsem zkontroloval Baidu a našel plugin jQuery pro zobrazení webových stránek na celé obrazovce: jquery FullScreen Plugin. Umožňuje zobrazení webových stránek na celé obrazovce pro různé prohlížeče, včetně FF 10, Chrome a Safari, a slouží k tomu, aby uživatelům poskytl čitelnější verzi webové stránky, kterou lze škálovat <canvas>a <video>detailně upravovat.
jQuery Fullscreen plugin
Popis
Tento plugin jQuery poskytuje jednoduchý mechanismus pro ovládání nového režimu na celou obrazovku v moderních prohlížečích. V současnosti tuto novou funkci na celou obrazovku nabízejí pouze novější prohlížeče založené na Webkitu (jako Chrome a Safari), Firefox a IE11+.
Použití
Vstup do režimu celé obrazovky
Můžete přepnout buď celou stránku, nebo jeden HTML prvek do režimu celé obrazovky:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
To funguje pouze tehdy, když byl kód spuštěn uživatelskou interakcí (například událost na kliknutí na tlačítko). Prohlížeče neumožňují vstup do režimu celé obrazovky bez interakce uživatele.
Ukončení režimu celé obrazovky
Režim celé obrazovky je vždy ukončen přes dokument, ale tento plugin to umožňuje i přes jakýkoli HTML prvek. Poté se použije dokument vlastníka vybraného HTML prvku:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Dotazování režimu na celou obrazovku
Jednoduše nepředávajte žádný argument metodě fullScreen pro dotazování na aktuální stav. Metoda vrací aktuální prvek na celou obrazovku (nebo true, pokud to prohlížeč nepodporuje), když je režim celé obrazovky aktivní, false pokud není aktivní, nebo null, pokud prohlížeč nepodporuje celou obrazovku vůbec. Tuto metodu můžete použít i k zobrazení tlačítka na celou obrazovku pouze tehdy, když prohlížeč podporuje režim celé obrazovky:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Přepínání režimu na celou obrazovku
Plugin poskytuje další metodu pro jednoduché přepínání režimu na celou obrazovku:
$(document).toggleFullScreen();
Oznámení
Plugin spustí událost změny celé obrazovky v dokumentu, když je režim celé obrazovky změněn. Pokud prohlížeč odmítl změnu stavu na celé obrazovce, plugin spustí událost fullscreenerror v dokumentu. Příklad:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " zapnuto": "vypnuto"));
});
$(document).bind("fullscreenerror", function() {
upozornění ("Prohlížeč odmítl změnu celé obrazovky");
});
Fullscreen iframe
Vstup do režimu celé obrazovky z iframe není ve výchozím nastavení povolen, ale lze jej povolit pomocí několika atributů na iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Známé problémy
V IE 11 se při vstupu do celé obrazovky z iframe zobrazuje prázdná stránka. Nevím proč. Každá pomoc je vítána.
V Safari (alespoň v Safari 7) není v režimu celé obrazovky povoleno vstupovat klávesnicí.
GitHub adresa: https://github.com/kayahr/jquery-fullscreen-plugin
Turisté, pokud chcete vidět skrytý obsah tohoto příspěvku, prosím Odpověď
| 
Zveřejněno 14.08.2017 16:34:52
|
|
|
Zveřejněno 14.08.2017 17:08:18
|
Zveřejněno 25.11.2017 14:35:17
|
