Как реализовать полноэкранный режим

Узнайте, как использовать JavaScript для создания полноэкранного окна.

полноэкранный окно

Как использовать JavaScript для просмотра элементов в полноэкранном режиме.

Нажмите кнопку, чтобы открыть видео в полноэкранном режиме:

Попробуйте сами

полноэкранный видео

Чтобы открыть элемент в полноэкранном режиме, мы используем: element.requestFullscreen() Метод:

Пример

<script>
/* Получите элемент, который будет отображаться в полноэкранном режиме (в этом примере это видео): */
var elem = document.getElementById("myvideo");
/* При выполнении функции openFullscreen() открыть видео в полноэкранном режиме. */
Обратите внимание, нам нужно включать префиксы для различных браузеров, так как они еще не поддерживают метод requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Попробуйте сами

полноэкранный документ

Чтобы открыть всю страницу в полноэкранном режиме, используйте: document.documentElement вместо document.getElementById("element")。

В этом примере мы также используем закрывающую функцию для выхода из полноэкранного режима:

Пример

<script>
/* Получение documentElement (<html>) для полного экрана страницы */
var elem = document.documentElement;
/* Полный экран для просмотра */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Выход из полного экрана */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Когда страница находится в режиме полного экрана, вы также можете использовать CSS для настройки стиля страницы:

Пример

/* Safari */
:fullscreen {-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:fullscreen {-ms-fullscreen {
  background-color: yellow;
}
/* Стандартная синтаксис */
:fullscreen {
  background-color: yellow;
}

Попробуйте сами

Соответствующие страницы

Руководство по HTML DOM:Метод requestFullscreen()

Руководство по HTML DOM:Метод exitFullscreen()

Руководство по HTML DOM:Метод documentElement