Metodo requestFullscreen() dell'API Fullscreen

Definizione e uso

requestFullscreen() Metodo per aprire l'elemento in modalità a schermo intero.

Suggerimento:Utilizzare Metodo exitFullscreen()Annullare la modalità a schermo intero.

Esempio

Esempio 1

Visualizzare l'elemento <video> in modalità a schermo intero:

/* Ottenere l'elemento da visualizzare in modalità a schermo intero (nel nostro esempio, il video): */
var elem = document.getElementById("myvideo");
/* Durante l'esecuzione della funzione openFullscreen(), aprire il video a schermo intero.
Attenzione, dobbiamo includere i prefissi dei diversi browser, poiché non supportano ancora l'attributo requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Prova personalmente

Esempio 2

Per aprire una pagina HTML a schermo intero, utilizzare document.documentElement invece di document.getElementById("element").In questo esempio, abbiamo anche utilizzato una funzione di chiusura per chiudere lo schermo intero:

/* Ottieni documentElement (<html>) per visualizzare la pagina a schermo intero */
var elem = document.documentElement;
/* Visualizza a schermo intero */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Chiudi modalità a schermo intero */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Prova personalmente

Esempio 3

Quando la pagina è in modalità a schermo intero, puoi anche utilizzare CSS per impostare lo stile della pagina:

/* Sintassi Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* Sintassi IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Sintassi standard */
:fullscreen {
  background-color: yellow;
}

Prova personalmente

Sintassi

HTMLElementObject.requestFullscreen()

Parametri

Nessuno.

Dettagli tecnici

Valore di ritorno: Nessun valore di ritorno.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questo metodo.

Note:Alcuni browser necessitano di prefissi specifici (vedi parentesi):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)