Full Screen API

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

Применить

Полноэкранный режим можно применять как для отдельных элементов 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 && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
        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) {
        toggleFullScreen();
    }
}, false);
  • element.requestFullscreen() — отображает элемент в полноэкранном режиме.
  • document.fullscreenEnabled — возвращает true, если на странице есть элементы fullscreen, если таких нет false.
  • document.fullscreenElement — возвращает элемент, который отображается в полноэкранном режиме, если такого элемента нет null.
  • document.exitFullscreen() — выйти из полноэкранного режима.

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

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

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

Поддержка

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

Таблица поддержки браузерами: “Full Screen API”

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)