Lecaw

Учимся создавать Web-сайты

Новая технология - Полноэкранный режим \ Как сделать полноэкранный режим

July 15, 2013 88hits

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

 

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

  • Chrome (v15)
  • Firefox (v9)
  • Safari (v5)
  • Opera (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 и нажатие клавиши). Используйте F или клавишу Enter, чтобы включить полноэкранный режим.

// mozfullscreenerror обработчик события
function errorHandler() {
   alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// Переключение полноэкранного режима
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();
    }
  }
}
// обработчик события нажатия клавиши
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
    toggleFullScreen();
  }
}, false);

ДЕМО

СКАЧАТЬ

 

 

 

API: методы и события

partial interface Element {
  void requestFullscreen();
};
partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  readonly attribute Element? fullscreenElement;
  void exitFullscreen();
};

Пояснение.

  • element.requestFullscreen() Выводит элемент в полноэкранном режиме.
  • document.fullscreenEnabled Присваивает значение true для документа, появляется возможность отображения элементов в полноэкранном режиме.
  • document.fullscreenElement Возвращает элемент, отображает его на полный экран, если такого элемента нет, ничего не отображает.
  • document.exitFullscreen() Останавливает любые элементы в документе, они не будет отображаться на полный экран.

Заключение

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

 

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

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий