Ma a munkahelyén szembesültem azzal a igénylel, hogy egy weboldal teljes képernyős megjelenítése legyen, ezért megnéztem a Baidu-t, és találtam egy jQuery bővítményt a weboldalak teljes képernyős megjelenítéséhez: jquery FullScreen Plugin. Lehetővé teszi a weboldalak teljes képernyős megjelenítését különféle böngészőkhöz, beleértve az FF 10-et, a Chrome-ot és a Safarit, és arra szolgál, hogy a felhasználók számára olvashatóbb, skálázható és elemekkel bővíthető verziót biztosítson a <canvas><video>weboldalnak.
jQuery Fullscreen plugin
Leírás
Ez a jQuery bővítmény egy egyszerű használható mechanizmust kínál a modern böngészők új teljes képernyős módjának vezérlésére. Jelenleg csak az újabb Webkit-alapú böngészők (például Chrome és Safari), Firefox és IE11+ kínálják ezt az új teljes képernyős funkciót.
Használat
Teljes képernyős módba lépés
Vagy átállíthatod az egész oldalt, vagy egyetlen HTML elemet teljes képernyős módra:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Ez csak akkor működik, ha a kódot egy felhasználói interakció indította el (például egy gomb onclick eseménye). A böngészők nem engedik a teljes képernyős módba lépést a felhasználói interakció nélkül.
Teljes képernyős módból való kilépés
A teljes képernyős mód mindig a dokumentumon keresztül kapcsol ki, de ez a bővítmény lehetővé teszi bármelyik HTML elemmel is. A kiválasztott HTML elem tulajdonosi dokumentumát használják ekkor:
$(document).fullScreen(hamis);
$("#myVideo").fullScreen(hamisan);
Teljes képernyős mód lekérdezése
Egyszerűen ne adj argumentumot a fullScreen metódónak, hogy lekérdezzed az aktuális állapotot. A módszer a teljes képernyős mód aktív állapota esetén a jelenlegi teljes képernyős elemet (vagy igaz, ha a böngésző nem támogatja ezt), hamis, ha nem aktív, vagy null, ha a böngésző nem támogatja a teljes képernyőt Egyáltalán nem működik. Tehát ezt a módszert használhatod arra is, hogy teljes képernyős gombot csak akkor jeleníts meg, ha a böngésző teljes képernyős módot támogat:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Teljes képernyős mód kikapcsolása
A plugin egy másik egyszerű teljes képernyős módváltási módot kínál:
$(document).toggleFullScreen();
Értesítések
A bővítmény fullscreenchange eseményt indít el a dokumentumon, amikor a teljes képernyős módot megváltoztatták. Ha a böngésző elutasította a teljes képernyős állapotváltást, akkor a bővítmény fullscreenerror eseményt indít el a dokumentumon. Példa:
$(document).bind("fullscreenchange", function() {
console.log("Teljes képernyő" + ($(document).fullScreen() ? " on" : "off"));
});
$(document).bind("fullscreenerror", function() {
alert("Böngésző elutasította a teljes képernyős változást");
});
Teljes képernyős iframe
Alapértelmezés szerint nem engedélyezett a teljes képernyős módba egy iframe belső működéséből, de néhány attribútummal engedélyezhető az iframe-en:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Ismert problémák
Az IE 11-ben üres oldal jelenik meg, amikor egy iframe belsejéből lépnek be teljes képernyőre. Fogalmam sincs, miért. Bármilyen segítséget szívesen fogadok.
Safariban (legalábbis Safari 7-ben) teljes képernyős módban nem engedélyezett billentyűzet bemenete.
GitHub cím: https://github.com/kayahr/jquery-fullscreen-plugin
Turisták, ha szeretnétek megnézni ennek a bejegyzésnek a rejtett tartalmát, kérlek Válasz
|
Közzétéve 2017. 08. 14. 16:34:52
|
|
|
Közzétéve 2017. 08. 14. 17:08:18
|
Közzétéve 2017. 11. 25. 14:35:17
|
