Jak osiągnąć pełny ekran

Naucz się, jak używać JavaScript do tworzenia okien pełnego ekranu.

Okno pełnego ekranu

Jak używać JavaScript do wyświetlania elementów w trybie pełnego ekranu.

Kliknij przycisk, aby otworzyć wideo w trybie pełnego ekranu:

Spróbuj sam

Pełny ekran wideo

Aby otworzyć element w trybie pełnego ekranu, używamy element.requestFullscreen() Metoda:

Przykład

<script>
/* Pobierz element, który ma być wyświetlony w trybie pełnego ekranu (w tym przykładzie to wideo): */
var elem = document.getElementById("myvideo");
/* Gdy uruchamiana jest funkcja openFullscreen() otworzy wideo w trybie pełnego ekranu.
Uwaga, musimy zawrzeć prefiksy dla różnych przeglądarek, ponieważ jeszcze nie obsługują one metody requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Spróbuj sam

Pełny ekran dokumentu

Aby otworzyć całą stronę w trybie pełnego ekranu, użyj document.documentElement zamiast document.getElementById("element").

W tym przykładzie używamy również funkcji zamykającej, aby wyjść z trybu pełnego ekranu:

Przykład

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

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

Przykład

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Standardowa składnia */
:fullscreen {
  background-color: yellow;
}

Spróbuj sam

Strony związane

Podręcznik HTML DOM:Metoda requestFullscreen()

Podręcznik HTML DOM:Metoda exitFullscreen()

Podręcznik HTML DOM:Metoda documentElement