Full Screen API

fullscreen — это простой способ отобразить содержание веб-страницы в полноэкранном режиме. Основное предназначение технологии Full Screen API смотреть фотоальбомы, видео, игры в полноэкранном режиме.

Оглавление:
  1. Применить
  2. Псевдокласс :full-screen
  3. Полноэкранный режим
  4. Методы и события
  5. Дополнительные события
  6. Поддержка

Применить

Полноэкранный режим можно применять как для отдельных элементов DOM, так и для всей страницы в целом, методом document.getElementById(). Код ниже делает запрос на включение полноэкранного режима, после того как запрос будет принят, вся панель инструментов в браузере исчезнет, и на экране появится элемент или вся веб-страница на весь экран.

var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
к меню ↑

Псевдокласс :full-screen

Для того что бы применить стиль к элементам, которые находятся в полноэкранном режиме, в CSS был добавлен псевдокласс :full-screen.

:-webkit-full-screen #myObject {
   font-size: 20px;
   width: 100%;
}
:-moz-full-screen #myObject {
   font-size: 20px;
   width: 100%;
}
к меню ↑

Полноэкранный режим

Пример включить полноэкранном режим с двумя обработчиками событий: mozfullscreenerror и keydown. Используйте клавишу F или Enter, чтобы включить полноэкранный режим.

Демо

// mozfullscreenerror event handler
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);

// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}

// keydown event handler
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
toggleFullScreen();
}
}, false);
к меню ↑

Методы и события

partial interface Element { 
void requestFullscreen(); 
}; 
partial interface Document { 
readonly attribute boolean fullscreenEnabled; 
readonly attribute Element? 
fullscreenElement; void exitFullscreen(); 
};
  • element.requestFullscreen() — отображает элемент в полноэкранном режиме.
  • document.fullscreenEnabled — возвращает true, если на странице есть элементы fullscreen, если таких нет false.
  • document.fullscreenElement — возвращает элемент, который отображается в полноэкранном режиме, если такого элемента нет null.
  • document.exitFullscreen() — выйти из полноэкранного режима.
к меню ↑

Дополнительные события

Существует несколько оповещений: при успешном активизировании полноэкранного режима, документ получает событие mozfullscreenchange.

  • mozfullscreenchange успешное активирован полноэкранный режим. Событие не показывает полноэкранный режим когда отменён.
  • mozFullScreenElement полноэкранный режим.
  • fullscreenerror если запрос fullscreen не выполняется, браузер запишет ошибку в консоли.
  • cancelFullScreen закрыть полноэкранный режим.
к меню ↑

Поддержка

Спецификация не была окончательно подтверждена, нужно использовать префиксы для разных браузеров, и вполне возможно, что синтаксис и поведение может быть изменено в будущих версиях браузеров. На сегодняшний день, эта спецификация работает в таких браузерах: