Esegui un sito Web in modalità schermo intero

Question

Sto cercando un trucco per mettere il mio sito Web in modalità schermo intero senza interazione umana.

Ho trovato alcuni esempi utilizzando le tecniche di HTML5, ma tutto deve quindi essere attivato da un'interazione umana.

Questo sito verrà visualizzato in una TV ...

già che in carico il sito web utilizzando un file SWF in modalità a schermo intero, ma invece di andare in questa direzione, vorrei sottolineare tutte le possibilità utilizzando solo il modello predefinito (html, css e javascript)

Answer 1

Non è possibile forza un sito Web da visualizzare in modalità schermo intero.

Immaginate le preoccupazioni per la sicurezza se fosse possibile.
I siti Web dannosi potrebbero "dirottare" il desktop di una persona meno informata per qualsiasi tipo di dubbio lavoro.

Tutti di JS schermo intero API sarà lanciare un errore come questo:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." Se si tenta di chiamare semplicemente dal codice.

Sono dannatamente sicuro Flash è simile, in quanto richiede l'interazione dell'utente per andare a schermo intero. Altrimenti, avremmo visto la nostra giusta quota di popup a schermo intero che sono quasi impossibili da chiudere.

Answer 2

Potrebbe essere possibile utilizzare i metodi requestFullScreen() come descritto in https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.

Nota: questo richiede ancora l'input dell'utente, ma evita l'uso del flash.

function toggleFullScreen() { 
    if (!document.fullscreenElement && // alternative standard method 
     !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.msRequestFullscreen) { 
     document.documentElement.msRequestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
    } else { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } 
    } 
} 

toggleFullScreen(); 

Ciò consente di attivare la pagina a schermo intero e può essere attivata tramite caricamento della pagina su una pagina javascript. Tuttavia, non c'è supporto per i browser più vecchi.

Answer 3

Quando ho avuto bisogno di fare qualcosa di simile ho usato uno splash screen. Il pulsante per continuare in modalità a schermo intero richiesto come un attributo di un pop JS:

onClick="window.open('pageName.html', 'test', 'fullscreen=yes')" 

Questo non è Fullproof, ma ha funzionato meglio di qualsiasi altro metodo che ho trovato. Probabilmente non sarai in grado di farlo senza l'interazione dell'utente, quindi usare qualcosa come uno splashscreen ti permetterà di minimizzare l'intrusione in qualcosa di più comunemente accettato.

Answer 4

Altre risposte già descrivono come si può andare a schermo intero in un modo più o meno indipendente dal browser. Tuttavia, rimane il problema di aver bisogno dell'interazione dell'utente.

---

Non è possibile forzare la visualizzazione della pagina Web in modalità schermo intero per motivi di sicurezza. Per questo è necessaria l'interazione dell'utente.

Inoltre, il browser lascia la modalità a schermo intero ogni volta che l'utente accede a un'altra pagina, anche sullo stesso sito Web, e (s) dovrà eseguire alcune "interazione utente" su ogni pagina per tornare alla modalità a schermo intero.
Questo è il motivo per cui il tuo sito web deve essere una singola pagina se vuoi che sia a schermo intero.

---

Questo è quello che suggerisco: utilizzare una singola splash page che ha un iframe nascostosu di esso.

Ogni volta che l'utente fa clic in qualsiasi punto o preme un tasto qualsiasi, basta impostare questo iFrame come schermo intero e mostrarlo. Quando si riceve un evento quando si esce dalla modalità a schermo intero, nascondere nuovamente iFrame per mostrare splash.

I collegamenti si aprono nello stesso frame per impostazione predefinita, quindi resterai in modalità a schermo intero finché l'utente non lo abbandona esplicitamente o alcuni link si aprono in una nuova scheda.

Ecco un esempio che funziona in Chrome: (. See it in action. Utilizza altre risposte per renderlo indipendente dal browser)

<html> 
<head> 
    <script language="jscript"> 
     function goFullscreen() { 
      // Must be called as a result of user interaction to work 
      mf = document.getElementById("main_frame"); 
      mf.webkitRequestFullscreen(); 
      mf.style.display=""; 
     } 
     function fullscreenChanged() { 
      if (document.webkitFullscreenElement == null) { 
       mf = document.getElementById("main_frame"); 
       mf.style.display="none"; 
      } 
     } 
     document.onwebkitfullscreenchange = fullscreenChanged; 
     document.documentElement.onclick = goFullscreen; 
     document.onkeydown = goFullscreen; 
    </script> 
</head> 
<body style="margin:0"> 
    <H1>Click anywhere or press any key to browse <u>w3schools</u> in fullscreen.</H1> 
    <iframe id="main_frame" src="http://www.w3schools.com" style="width:100%;height:100%;border:none;display:none"></iframe> 
</body> 
</html> 

---

P.S. Mi piace il link fornito da @jsve sopra, e in questo modo è ancora meglio: change your OS :).
Inoltre, non sono uno sviluppatore web. Pensavo che questa domanda sarebbe interessante da investigare.

Answer 5

Questo non è esattamente ciò che l'OP cercava, ma nella mia situazione particolare, ho trovato una combinazione di modalità kiosk e alcuni stili dinamici per funzionare.

Stavo cercando di avviare un browser con un particolare URL e farlo iniziare in modalità a schermo intero. Il caso d'uso è poca o nessuna interazione dell'utente su un terminale in un impianto di produzione con una schermata di stato. Dopo l'accensione, è necessario visualizzare solo lo stato senza interazione (cioè non visualizzare nessuno degli elementi dell'interfaccia utente di configurazione a meno che l'utente non interagisca).

Forse, non realistico su un sito complesso, ma il mio utilizzo era un particolare elemento "riquadro" (div in questo caso). Per mettere a fuoco il particolare div, ho nascosto le altre div e ho impostato gli stili di conseguenza. Se accade che l'interazione dell'utente cambi da e a schermo intero, I (1) uso il normale myElement. * RequestFullScreen() document. * ExitFullscreen() chiama, (2) mostra/nasconde gli altri div e (3) passa tra le classi inferiori:

.right-pane-fullscreen 
{ 
    margin-left: 0px; 
} 

.right-pane-normal 
{ 
    margin-left: 225px; 
} 

discussione correlati su come utilizzare la modalità kiosk in Chrome (essere consapevoli che altro Chrome processi in esecuzione prima di lanciare la modalità kiosk può impedire questo lavoro) Opening Chrome browser in full window or kiosk mode on windows 7