Imposta finestra a schermo intero (REAL schermo intero, funzionalità F11) da javascript

Ci sono diverse domande a riguardo, alcuni dicono che non è ansible, alcuni dicono che è ansible in IE come la modalità a schermo intero di Internet Explorer? e mi sto chiedendo una soluzione universale e una risposta per questo.

Sto costruendo una pagina web di una galleria fotografica e la galleria fa davvero la differenza quando viene visualizzata a schermo intero (come dice il titolo, sto parlando di vero a schermo intero, non con barre e windows cromate, ecc.) E vorrei posizionare un pulsante per schermo intero. (no, non andrò con forza su FS senza l’intenzione dell’utente, odio anche questo tipo di “funzionalità”) È ansible in Flash quando viene avviata tramite un’azione avviata dall’utente come il clic del pulsante, e mi chiedevo se tale la cosa è disponibile anche per Javascript. Logicamente, dovrebbe avere un meccanismo simile alla modalità a schermo intero avviata dall’utente Flash / SL. Se non ci sono funzionalità “universali” che funzionino per tutti, sto bene (meglio di niente) per funzionalità parziali (intendo il supporto di alcuni dei browser , NON impostando la larghezza / altezza della finestra, ecc. dicendo di impostare la larghezza / altezza della finestra, so come farlo, NON lo cerco anch’io).

Questo è ora ansible nelle ultime versioni di Chrome, Firefox e IE (11).

Seguendo i suggerimenti di Zuul su questo thread , ho modificato il suo codice per includere IE11 e l’opzione a schermo intero qualsiasi elemento di scelta sulla tua pagina.

JS:

function toggleFullScreen(elem) { // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) { if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } 

HTML:

  

Dove “document.body” è un elemento che desideri.

Si noti inoltre che il tentativo di eseguire questi comandi a schermo intero dalla console non sembra funzionare su Chrome o IE. Comunque ho avuto successo con Firebug in Firefox.

Un’altra cosa da notare è che questi comandi “a schermo intero” non hanno una barra di scorrimento verticale, è necessario specificarlo all’interno del CSS:

 *:fullscreen *:-ms-fullscreen, *:-webkit-full-screen, *:-moz-full-screen { overflow: auto !important; } 

Il “! Importante” sembra essere necessario per IE renderlo

Ecco un esempio di come funziona .

No. Le versioni precedenti di IE (≤6) lo consentivano, ma questa funzionalità è vista come un problema di sicurezza, quindi nessun browser moderno lo consente.

Puoi comunque chiamare window.open(url,'','fullscreen=yes') , che ti ottiene il 90% del tempo, ma ha risultati leggermente diversi:

  • IE apre una finestra con solo la barra del titolo e la barra degli indirizzi. La finestra è dimensionata per riempire l’intero schermo e copre la barra delle applicazioni di Windows .
  • Mozilla apre anche una finestra con solo la barra del titolo e la barra degli indirizzi. Tuttavia, la nuova finestra eredita le dimensioni della finestra di apertura. Se la finestra di apertura è ingrandita, la nuova finestra viene aperta al massimo. (La barra delle applicazioni non è coperta.)
  • Chrome apre anche una finestra con solo la barra del titolo e la barra degli indirizzi. La nuova finestra eredita le dimensioni della finestra di apertura, ma non viene mai ingrandita (anche se la finestra di apertura è ingrandita).

Questo è il più vicino ansible con JavaScript. La tua altra opzione sarebbe quella di creare qualcosa in Flash (ugh!) , O semplicemente avere il pulsante “fullscreen” che fa apparire un lightbox che dice “Premi F11 per andare a schermo intero” e nascondi il lightbox su window.resize o cliccando su un pulsante di annullamento nella lightbox.


Modifica: un’appropriata API a schermo intero ( proposta inizialmente da Mozilla e successivamente pubblicata come proposta W3C ) è stata implementata da Webkit (Safari 5.1 + / Chrome 15+) e Firefox (10+). Una breve storia e esempi di utilizzo qui. Si noti che IE10 non supporterà l’API.

È ansible eseguire questa operazione con un’applet java con firma che ha il permesso di eseguire uno script di automazione per emettere la sequenza di tasti per passare alla modalità a schermo intero. Ma questo è un trucco totale che non sarebbe molto pratico a meno che i tuoi utenti non si preoccupino del fatto che il tuo sito manipoli le loro macchine.

C’è una libreria sconosciuta che fa tutto il lavoro per te:

https://github.com/rafrex/fscreen

Ho avuto lo stesso problema e l’ho fatto (ad esempio in un componente di reazione):

 import fscreen from 'fscreen'; ..... if (fscreen.fullscreenElement == null) { fscreen.requestFullscreen(document.documentElement); }else{ fscreen.exitFullscreen(); } 

Funziona con Chrome, Firefox, Safari, IE11, iOS, Android

Mi chiedo perché nessuno abbia notato che tutte le risposte sono sbagliate.

Impostare l’elemento del corpo a schermo intero non ha lo stesso comportamento di premere F11.

Lo stesso comportamento di F11 può essere ottenuto da:

 document.documentElement.webkitRequestFullScreen(); // on 

e

 document.webkitCancelFullScreen(); // off 

anche per verificare se siamo in modalità a schermo intero io uso questa linea:

 isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null) 

Il supporto a schermo intero tramite lo script java non è implementato per Chrome o Firefox. Comunque puoi riuscire ad averlo per MSIE. Ma questo non è il tipo di funzionalità F11.

Anche chrome.exe -kiosk non apre la pagina in modalità schermo intero.

Il motivo è che non è consigliabile forzare l’utente e aprire l’applicazione in modalità a schermo intero. Se questo non è tutti i popup di diversi siti web si apriranno in modalità schermo intero e finirai per chiudere tutti quelli.