På arbejdet i dag stødte jeg på et behov for fuldskærmsvisning af en webside, så jeg tjekkede Baidu og fandt et jQuery-plugin til fuldskærmsvisning af websider: jquery FullScreen Plugin. Den muliggør fuldskærmsvisning af websider til en række forskellige browsere, herunder FF 10, Chrome og Safari, og bruges til at give brugerne en mere læsbar version af websiden, som kan skaleres <canvas>og <video>opdeles.
jQuery fuldskærms-plugin
Beskrivelse
Dette jQuery-plugin giver en brugervenlig mekanisme til at styre den nye fuldskærmstilstand i moderne browsere. I øjeblikket er det kun nyere Webkit-baserede browsere (som Chrome og Safari), Firefox og IE11+, der tilbyder denne nye fuldskærmsfunktion.
Anvendelse
Går ind i fuldskærmstilstand
Du kan enten skifte hele siden eller et enkelt HTML-element til fuldskærmstilstand:
$(dokument).fullScreen(true);
$("#myVideo").fullScreen(true);
Dette virker kun, når koden blev udløst af en brugerinteraktion (for eksempel en onclick-begivenhed på en knap). Browsere tillader ikke at gå i fuldskærmstilstand uden brugerinteraktion.
Afslutter fuldskærmstilstand
Fuldskærmstilstand afsluttes altid via dokumentet, men dette plugin tillader det også via ethvert HTML-element. Ejerdokumentet for det valgte HTML-element bruges derefter:
$(dokument).fullScreen(falsk);
$("#myVideo").fullScreen(falsk);
Forespørgsler i fuldskærmstilstand
Lad blot fuldskærmsmetoden ikke overlade argumenter for at forespørge den aktuelle tilstand. Metoden returnerer det aktuelle fuldskærmselement (eller sandt, hvis browseren ikke understøtter dette), når fuldskærmstilstand er aktiv, falsk hvis ikke aktiv eller null, når browseren ikke understøtter fuldskærm mode overhovedet. Så du kan også bruge denne metode til kun at vise en fuldskærmsknap, når browseren understøtter fuldskærmstilstand:
$("#fullscreenButton").toggle($(dokument).fullScreen() != null))
Tilbøjelse af fuldskærmstilstand
Plugin'et tilbyder en anden metode til simpel fuldskærms-skifte:
$(dokument).toggleFullScreen();
Notifikationer
Plugin'et udløser en fuldskærmsændringsbegivenhed i dokumentet, når fuldskærmstilstanden er ændret. Hvis browseren afviste en fuldskærmsstatusændring, udløser plugin'et en fuldskærmsfejlhændelse i dokumentet. Eksempel:
$(document).bind("fullscreenchange", function() {
console.log("Fuldskærm" + ($(dokument).fuldSkærm() ?" " on" : "off"));
});
$(document).bind("fullscreenerror", function() {
alert("Browser afvist fuldskærmsændring");
});
Fuldskærms iframe
At gå ind i fuldskærmstilstand inden for en iframe er ikke tilladt som standard, men det kan aktiveres med nogle få attributter på iframen:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Kendte problemer
I IE 11 vises en tom side, når man går ind i fuldskærm fra en iframe. Ingen idé om hvorfor. Al hjælp er velkommen.
I Safari (i hvert fald i Safari 7) er tastaturindtastning ikke tilladt i fuldskærmstilstand.
GitHub-adresse: https://github.com/kayahr/jquery-fullscreen-plugin
Turister, hvis I vil se det skjulte indhold i dette indlæg, så vær venlig Svar
| 
Opslået på 14/08/2017 16.34.52
|
|
|
Opslået på 14/08/2017 17.08.18
|
Opslået på 25/11/2017 14.35.17
|
