Metoda requestFullscreen() API Fullscreen

Definicja i użycie

requestFullscreen() Metoda otwierania elementu w trybie pełnego ekranu.

Wskazówka:Proszę użyć Metoda exitFullscreen()Anuluj tryb pełnego ekranu.

Przykład

Przykład 1

Wyświetl element <video> w trybie pełnego ekranu:

/* Pobierz element, który ma być wyświetlony w trybie pełnego ekranu (w tym przykładzie wideo): */
var elem = document.getElementById("myvideo");
/* Podczas wykonywania funkcji openFullscreen() otwiera wideo w trybie pełnego ekranu.
Proszę zauważyć, że musimy zawrzeć prefiksy różnych przeglądarek, ponieważ jeszcze nie obsługują one atrybutu requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Spróbuj sam

Przykład 2

Aby otworzyć stronę HTML w trybie pełnego ekranu, użyj document.documentElement zamiast document.getElementById("element"). W tym przykładzie użyliśmy również funkcji zamknięcia, aby zamknąć tryb pełnego ekranu:

/* Pobierz documentElement (<html>) do wyświetlenia strony w trybie pełnego ekranu */
var elem = document.documentElement;
/* Przegląd w trybie pełnego ekranu */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Zamknięcie pełnego ekranu */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Spróbuj sam

Przykład 3

Gdy strona jest w trybie pełnego ekranu, możesz również użyć CSS do ustawienia stylu strony:

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

Spróbuj sam

Gramatyka

HTMLElementObject.requestFullscreen()

Parametry

Brak.

Szczegóły techniczne

Zwracana wartość: Brak zwracanej wartości.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje tę metodę w pełni.

Komentarz:Niektóre przeglądarki wymagają specyficznych prefiksów (patrz nawiasy):

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)