Oggi al lavoro, ho incontrato la necessità di visualizzare una pagina web a schermo intero, così ho controllato Baidu e ho trovato un plugin jQuery per la visualizzazione a schermo intero delle pagine web: jquery FullScreen Plugin. Consente la visualizzazione a schermo intero delle pagine web per una varietà di browser diversi, tra cui FF 10, Chrome e Safari, ed è utilizzato per fornire agli utenti una versione più leggibile della pagina web, che può essere <canvas>scalata ed <video>elementata.
Plugin a schermo intero jQuery
Descrizione
Questo plugin jQuery offre un meccanismo semplice da usare per controllare la nuova modalità a schermo intero dei browser moderni. Attualmente solo i browser più recenti basati su Webkit (come Chrome e Safari), Firefox e IE11+ offrono questa nuova funzione a schermo intero.
Utilizzo
Ingresso in modalità Fullscreen
Puoi cambiare l'intera pagina o un singolo elemento HTML in modalità a schermo intero:
$(document).fullScreen(vero);
$("#myVideo").fullScreen(vero);
Questo funziona solo quando il codice è stato attivato da un'interazione dell'utente (ad esempio un evento onclick su un pulsante). I browser non permettono di entrare in modalità schermo intero senza l'interazione dell'utente.
Uscita dalla modalità Fullscreen
La modalità a schermo intero viene sempre chiusa tramite il documento, ma questo plugin lo consente anche tramite qualsiasi elemento HTML. Viene quindi utilizzato il documento proprietario dell'elemento HTML selezionato:
$(documento).fullScreen(falso);
$("#myVideo").fullScreen(falso);
Interrogazione della modalità a schermo intero
Basta passare nessun argomento al metodo fullScreen per interrogare lo stato attuale. Il metodo restituisce l'elemento a schermo intero corrente (o vero se il browser non lo supporta) quando la modalità a schermo intero è attiva, falso se non attivo o nullo quando il browser non supporta schermo intero Assolutamente in modo di moda. Quindi puoi usare questo metodo anche per visualizzare un pulsante a schermo intero solo quando il browser supporta la modalità a schermo intero:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Attivazione della modalità a schermo intero
Il plugin fornisce un altro metodo per l'attivazione semplice della modalità a schermo intero:
$(document).toggleFullScreen();
Notifiche
Il plugin attiva un evento di cambio a schermo intero sul documento quando la modalità a schermo intero viene modificata. Se il browser ha rifiutato un cambiamento di stato a schermo intero, il plugin attiva un evento di errore a schermo intero sul documento. Esempio:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " acceso" : "spento"));
});
$(document).bind("fullscreenerror", function() {
alert("Browser rifiutato modifica a schermo intero");
});
Iframe a schermo intero
Entrare in modalità schermo intero dall'interno di un iframe non è consentito di default, ma può essere abilitato con alcuni attributi sull'iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Problemi noti
In IE 11 viene visualizzata una pagina vuota entrando in schermo intero da un iframe. Non ho idea del perché. Qualsiasi aiuto è ben accetto.
In Safari (almeno in Safari 7) non è consentito l'input da tastiera in modalità schermo intero.
Indirizzo GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Turisti, se volete vedere il contenuto nascosto di questo post, vi prego Risposta
| 
Pubblicato su 14/08/2017 16:34:52
|
|
|
Pubblicato su 14/08/2017 17:08:18
|
Pubblicato su 25/11/2017 14:35:17
|
