Метод requestFullscreen() APIFullscreen

Определение и использование

requestFullscreen() Метод открывает элемент в полноэкранном режиме.

Совет:Используйте Метод exitFullscreen()Отменить полноэкранный режим.

Пример

Пример 1

Отображение элемента <video> в полноэкранном режиме:

/* Получите элемент, который нужно отобразить в полноэкранном режиме (в этом примере это видео): */
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();
  }
}

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

Пример 2

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

/* Получить 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();
  }
}

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

Пример 3

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

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

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

Синтаксис

HTMLElementObject.requestFullscreen()

Параметры

Нет.

Технические детали

Возвращаемое значение: Нет возвращаемого значения.

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот метод.

Комментарии:Некоторые браузеры требуют специфического префикса (см. скобки):

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