Новая технология HTML5: полноэкранный режим

 Новая технология HTML5, полноэкранный API, дает нам простой способ представления содержимого веб-страницы в полноэкранном режиме. Мы собираемся дать вам подробную информацию о полноэкранном режиме. Просто попытайтесь представить все возможные преимущества этой технологии — полноэкранные фотоальбомы, видео и даже игры. Но прежде чем мы опишем эту новую технологию, я должен отметить, что эта технология является экспериментальной, и не все браузеры поддерживают ее.

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

• Chrome (v15)
• Firefox (v9)
• Сафари (v5)
• Опера (v12.10)
• Internet Explorer (v11)

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

В связи с тем, что этот режим поддерживается разными браузерами по-разному, мы должны предусмотреть все случаи:

var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Как видите, мы можем запросить полноэкранный режим для любого элемента DOM (или мы можем применить его для всей страницы — document.documentElement). Этот код отправляет запрос пользователю о разрешении на включение полноэкранного режима, если этот запрос будет принят, все панели инструментов и другие панели в браузере исчезнут, и единственной вещью на экране будет желаемый элемент или весь Веб-страница.

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

Был добавлен новый псевдокласс CSS -: полноэкранный. Его можно использовать для стилизации элементов в полноэкранном режиме. Это очень полезно, потому что очевидно, что в полноэкранном режиме больше места для ваших элементов.

:-webkit-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}
:-moz-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}

Дополнительная информация

Есть несколько уведомлений: когда полноэкранный режим успешно включен, документ получает событие «mozfullscreenchange». Когда полноэкранный режим отменяется, документ получает событие mozfullscreenchange (снова). Обратите внимание, что это событие не отображается, если документ входит или выходит из полноэкранного режима. Совет: если документ имеет ненулевое значение mozFullScreenElement, мы находимся в полноэкранном режиме.

Что делать, если не работает полноэкранный запрос? В случае сбоя элемент, запросивший полноэкранный режим, получит событие fullscreenerror. Кроме того, ваш браузер будет записывать это сообщение об ошибке в веб-консоль

Наконец, если вы готовы выйти из полноэкранного режима, вы можете вызвать метод cancelFullScreen.

Последний пример

Это пример, который вы можете использовать для переключения страницы документа в полноэкранный режим. Есть два обработчика событий (для обработки событий 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();
};