<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

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

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

Полноэкранный режим в 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. На этом все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.