Pull to refresh

Как использовать Fullscreen API

Reading time 3 min
Views 87K

В комплекте с HTML5 появилось большое количество нового API. Одним из них является Fullscreen API, которое предоставляет нативный способ для браузера, позволяющий отобразить веб-страницу в полноэкранном режиме для пользователя.
А еще хорошо то, что Fullscreen API является очень простым в использовании.

Методы


Методы, входящие в состав Fullscreen API

Согласно стандарту W3C название некоторых методов было изменено, но старые названия продолжают работать.
Element.requestFullscreen()

Этот метод позволяет одному элементу перейти в полноэкранный режим.
Document.getElementById("myCanvas").requestFullscreen()

Выполнение этого кода приведет к тому, что canvas с ID «myCanvas» перейдет в полноэкранный режим.
Document.cancelFullScreen()

новое название атрибута:
Document.exitFullscreen

Отменяет полноэкранный режим.
Document.fullScreen

новое название атрибута:
Document.fullscreenEnabled

Возвращает значение «истина», если пользователь находится в полноэкранном режиме.
Document.fullScreenElement

Возвращает элемент, который в настоящее время находится в полноэкранном режиме.
Обратите внимание, что это стандартные методы. Для того, что бы они работали во всех браузерах, нам необходимо использовать префиксы.

Поддерживаемые браузеры

  • Chrome
  • Firefox
  • Safari
  • Opera Next
  • Opera (начиная с версии 12.10)
  • Internet Explorer (начиная с версии 11)


Более подробная информация по поддержке Fullscreen API современными браузерами доступна по ссылке.

Будет полезным скрипт, позволяющий автоматически определять поддержку браузером Fullscreen API и в случае необходимости добавляет необходимый префикс к методам Fullscreen API.

Запуск полноэкранного режима

Сначала мы должны выяснить, какой метод распознает наш браузер. Для этого мы создадим функцию, которая будет проверять поддержку метода и вызовет рабочий метод:
function fullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.webkitrequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.mozRequestFullscreen) {
    element.mozRequestFullScreen();
  }
}


Если любой из requestFullscreen методов возвращают истинное значении, то вызывается тот метод, который поддерживается конкретным браузером и использует псевдокласс с его префикском.

После этого нужно вызвать функцию для полноэкранного режима:
//для всей страницы
var html = document.documentElement;
fullScreen(html);

// Для конкретного элемента на странице
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);


Результатом будет запрос пользователю с просьбой разрешить переход в полноэкранный режим, если пользователь разрешит переход, то все панели инструментов в браузере исчезнут, и на всем экране будет веб-страница или один элемент.

Отмена полноэкранного режима

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

Этот метод не требует никаких параметров, поскольку в отличие от метода requestFullscreen он всегда относится ко всему документу.
function fullScreenCancel() {
  if(document.requestFullscreen) {
    document.requestFullscreen();
  } else if(document.webkitRequestFullscreen ) {
    document.webkitRequestFullscreen();
  } else if(document.mozRequestFullscreen) {
    document.mozRequestFullScreen();
  }
}

//отменяет полноэкранный режим
fullScreenCancel();

CSS псевдоклассы


В комплекте с этим JavaScript API пришли и CSS псевдоклассы
:full-screen

Он может быть использован для задания стиля любых элементов на веб-странице, когда страница или элемент находится в полноэкранном режиме. Данный псевдокласс может пригодиться для задания размера элементов страницы, потому что в полноэкранном режиме происходит увеличение и самого рабочего пространства браузера.
:-webkit-full-screen {/*WebKit, Opera 15+*/
  font-size: 16px;
}
:-moz-full-screen {/*FireFox*/
  font-size: 16px;
}
:full-screen {/*Opera 12.15-, Blink, w3c standard*/
  font-size: 16px;
}
/*изменения одного элемента img*/
:-webkit-full-screen img {
  width: 100%;
  height: 100%;
}
:-moz-full-screen img {
  width: 100%;
  height: 100%;
}


Учтите, что нельзя отделять префиксы запятыми, потому что браузер не сможет распознать их:
/* Это не будет работать */
:-webkit-full-screen img,:-moz-full-screen img {
  width: 100%;
  height: 100%;
}


Для того, чтобы стили применялись правильно, вы должны поместить каждый псевдокласс с префиксом браузера в своем собственном блоке.

Заключение


Этот JavaScript API является одним из наименее известных из поставляемых с HTML5, но это эффективный и простой в реализации метод, позволяющий сфокусировать внимание пользователя на одном элементе, что особенно полезно для видео, изображений и игр.
Tags:
Hubs:
+40
Comments 34
Comments Comments 34

Articles