Относительно недавно один из моих учеников спросил меня: как сделать так, чтобы при нажатии на кнопку элемент страницы (параграф, картинка и т.д.) стали бы отображаться на полный экран ( Fullscreen ).

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

Относительно недавно один из моих учеников спросил меня: как сделать так, чтобы при нажатии на кнопку элемент страницы (параграф, картинка и т.д.) стали бы отображаться на полный экран (Fullscreen).

К счастью для этого существует встроенный браузерный механизм под названием Fullscreen API.

Прикладной интерфейс Fullscreen API

Прикладной интерфейс Fullscreen API предоставляет два метода, два события и одно свойство.

  • Метод Element.requestFullscreen() переводит элемент страницы в полноэкранный режим.
  • Метод document.exitFullscreen() выходит из полноэкранного режима (всегда вызывается на объекте document).
  • Событие fullscreenchange возникает, когда элемент входит в полноэкранный режим или выходит из него
  • Событие fullscreenerror возникает, когда элемент не может быть переведен в полноэкранный режим
  • Свойство document.fullscreenElement сообщает какой из элементов находится в полноэкранном режиме на странице в данный момент

Пример

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

  <button data-toggle-fullscreen>Переключить в полноэкранный режим</button>

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

  document.addEventListener('click', function(event) {

   // игнорирование событий, которые произошли не на данной кнопке
   if( !event.target.hasAttribute('data-toggle-fullscreen') ) return;

  }, false );

Затем, нам необходимо использовать свойство document.fullscreenElement для того, чтобы проверить находится ли уже какой-либо элемент страницы в полноэкранном режиме или нет. Если да, то мы используем метод document.exitFullscreen() для выхода из полноэкранного режима. В противном случае, вызовем requestFullscreen() на объекте document.documentElement.

  document.addEventListener('click', function (event) {

   // игнорирование событий, которые произошли не на данной кнопке
   if (!event.target.hasAttribute('data-toggle-fullscreen')) return;

   // если элемент уже в полноэкранном режиме, выйти из него
   // В противном случае войти в полный экран
   if (document.fullscreenElement) {
    document.exitFullscreen();
   } else {
    document.documentElement.requestFullscreen();
   }

  }, false);

Совместимость с браузерами

Fullscreen API работает во всех современных браузерах, в том числе в IE11 и выше. Однако, многие браузеры используют префиксные имплементации (как, mozRequestFullscreen) вместо стандартных.

Поэтому, чтобы данная функциональность работала во всех браузерах стандартным образом, нужно использовать полифилы для requestFullscreen(), exitFullscreen() и fullscreenElement, которые дают возможность использовать методы Fullscreen API без префиксов вендоров.

А, если вам необходимо использовать еще и события, то в этом случае я стоит вам полнофункциональный полифил Fullscreen API Polyfill. На этом все. Спасибо за внимание!