Täna tööl tekkis mul vajadus veebilehe täisekraani kuvamise järele, nii et kontrollisin Baidu ja leidsin jQuery plugina veebilehtede täisekraani kuvamiseks: jquery FullScreen Plugin. See võimaldab veebilehti täisekraanil kuvada erinevatele brauseritele, sealhulgas FF 10, Chrome ja Safari, ning võimaldab kasutajatel pakkuda veebilehe loetavamat versiooni, mida saab <canvas>skaleerida ja <video>elementeerida.
jQuery täisekraani plugin
Kirjeldus
See jQuery plugin pakub lihtsat mehhanismi kaasaegsete brauserite uue täisekraani režiimi juhtimiseks. Praegu pakuvad seda uut täisekraani funktsiooni ainult uuemad Webkit-põhised brauserid (nagu Chrome ja Safari), Firefox ja IE11+.
Kasutus
Täisekraanirežiimi sisenemine
Saad kas terve lehe või ühe HTML-elemendi täisekraani režiimi lülitada:
$(document).fullScreen(true); $("#myVideo").fullScreen(true); See töötab ainult siis, kui kood käivitati kasutaja sekkumise tõttu (näiteks nuppude on-click sündmus). Brauserid ei luba täisekraanirežiimi siseneda ilma kasutaja sekkumiseta.
Täisekraanirežiimist väljumine
Täisekraani režiim väljub alati dokumendi kaudu, kuid see plugin võimaldab seda ka mis tahes HTML-elemendi kaudu. Valitud HTML-elemendi omanikudokumenti kasutatakse siis:
$(document).fullScreen(vale); $("#myVideo").fullScreen(vale); Täisekraani režiimi päring
Lihtsalt ei edasta argumenti fullScreen meetodile, et pärida praegust olekut. Meetod tagastab praeguse täisekraani elemendi (või true, kui brauser seda ei toeta), kui täisekraanirežiim on aktiivne, false kui mitte aktiivne, või nulli, kui brauser ei toeta täisekraani Üldse režiim. Seega saad seda meetodit kasutada ka täisekraani nupu kuvamiseks ainult siis, kui brauser toetab täisekraani režiimi:
$("#fullscreenButton").toggle($(document).fullScreen() != null)) Täisekraani režiimi sisselülitamine
Plugin pakub veel üht lihtsat võimalust täisekraani režiimi vahetamiseks:
$(document).toggleFullScreen(); Teavitused
Plugin käivitab dokumendis täisekraani muutmise sündmuse, kui täisekraani režiim on muudetud. Kui brauser lükkas täisekraani oleku muutmise tagasi, käivitab plugin dokumendis täisekraani vea sündmuse. Näide:
$(document).bind("fullscreenchange", function() { console.log("Täisekraan" + ($(dokument).fullScreen() ? " on" : "off")); });
$(document).bind("fullscreenerror", function() { alert("Brauser lükkas täisekraani muudatuse tagasi"); }); Täisekraani iframe
Täisekraani režiimi sisenemine iframe'i seest ei ole vaikimisi lubatud, kuid seda saab lubada mõne iframe'i atribuudiga:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe> Tuntud probleemid
IE 11-s kuvatakse täisekraanile sisenemisel iframe'ist tühi leht. Ei tea, miks. Igasugune abi on teretulnud. Safaris (vähemalt Safari 7-s) ei ole täisekraanirežiimis klaviatuuri sisend lubatud.
GitHubi aadress: https://github.com/kayahr/jquery-fullscreen-plugin
Turistid, kui soovite näha selle postituse peidetud sisu, palun Vastuse
|