På jobb i dag støtte jeg på et behov for fullskjermvisning av en nettside, så jeg sjekket Baidu og fant en jQuery-plugin for fullskjermvisning av nettsider: jquery FullScreen Plugin. Den muliggjør fullskjermvisning av nettsider for ulike nettlesere, inkludert FF 10, Chrome og Safari, og brukes for å gi brukerne en mer lesbar versjon av nettsiden som kan skaleres <canvas>og <video>elementeres.
jQuery fullskjerm-plugin
Beskrivelse
Denne jQuery-pluginen gir en enkel mekanisme for å kontrollere den nye fullskjermmodusen i moderne nettlesere. For øyeblikket er det kun nyere Webkit-baserte nettlesere (som Chrome og Safari), Firefox og IE11+ som tilbyr denne nye fullskjermfunksjonen.
Bruk
Går inn i fullskjermmodus
Du kan enten bytte hele siden eller et enkelt HTML-element til fullskjermmodus:
$(dokument).fullScreen(true);
$("#myVideo").fullScreen(true);
Dette fungerer bare når koden ble utløst av en brukerinteraksjon (for eksempel en onclick-hendelse på en knapp). Nettlesere tillater ikke å gå inn i fullskjermmodus uten brukerinteraksjon.
Avslutter fullskjermmodus
Fullskjermmodus avsluttes alltid via dokumentet, men denne pluginen tillater det også via hvilket som helst HTML-element. Eierdokumentet til det valgte HTML-elementet brukes da:
$(dokument).fullScreen(false);
$("#myVideo").fullScreen(false);
Forespørsler i fullskjermmodus
Send bare ingen argumenter til fullScreen-metoden for å spørre om nåværende tilstand. Metoden returnerer det nåværende fullskjermelementet (eller true hvis nettleseren ikke støtter dette) når fullskjermmodus er aktiv, false hvis ikke aktiv, eller null når nettleseren ikke støtter fullskjerm modus i det hele tatt. Så du kan bruke denne metoden også for å vise en fullskjermsknapp kun når nettleseren støtter fullskjermmodus:
$("#fullscreenButton").toggle($(dokument).fullScreen() != null))
Å vippe fullskjermmodus
Pluginen tilbyr en annen metode for enkel veksling av fullskjermmodus:
$(dokument).toggleFullScreen();
Varsler
Pluginen utløser en fullskjermendringshendelse i dokumentet når fullskjermmodus er endret. Hvis nettleseren avviste en fullskjerm-tilstandsendring, utløser pluginen en fullskjerm-feilhendelse i dokumentet. Eksempel:
$(document).bind("fullscreenchange", function() {
console.log ("Fullskjerm" + ($(dokument).fullScreen() ?" på": "av"));
});
$(document).bind("fullscreenerror", function() {
alert("Nettleser avviste fullskjermsendring");
});
Fullskjerm iframe
Å gå inn i fullskjermmodus fra innsiden av en iframe er ikke tillatt som standard, men det kan aktiveres med noen få attributter på iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Kjente problemer
I IE 11 vises en tom side når man går inn i fullskjerm fra innsiden av en iframe. Ingen anelse hvorfor. All hjelp er velkommen.
I Safari (i hvert fall i Safari 7) er det ikke tillatt med tastaturinntasting i fullskjermmodus.
GitHub-adresse: https://github.com/kayahr/jquery-fullscreen-plugin
Turister, hvis dere vil se det skjulte innholdet i dette innlegget, vær så snill Svare
| 
Publisert på 14.08.2017 16:34:52
|
|
|
Publisert på 14.08.2017 17:08:18
|
Publisert på 25.11.2017 14:35:17
|
