Создание полноэкранных веб-приложений

0 305

Что такое полноэкранный API?

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

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

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

Практическое использование полноэкранного API

Работать с полноэкранным API очень просто. Он содержит ограниченный набор функций, и все, что нам нужно сделать, это немного настроить.

Создание полноэкранных веб-приложений

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Создание полноэкранных веб-приложений

Шаг 1. Запрос полноэкранного просмотра

Полноэкранный API предоставляет метод requestFullscreen() для запроса полноэкранного просмотра из браузера. Он возвращает промис, который разрешится после активации полноэкранного режима.

JavaScript let fullscreenHandler = document.querySelector(«.fullscreenButton»); fullscreenHandler.addEventListener(«click», () => { document.documentElement.requestFullscreen(); });

12345 let fullscreenHandler = document.querySelector(«.fullscreenButton»); fullscreenHandler.addEventListener(«click», () => {      document.documentElement.requestFullscreen();});

Здесь я прослушал событие нажатия кнопки и запросил полноэкранный режим для document. В результате приложение перейдет в полноэкранный режим. Мы можем использовать функцию requestFullscreen() для любого элемента. Я запросил полноэкранный режим для карты, и окончательная реализация будет выглядеть так.

JavaScript let mapHandler = document.querySelector(«.mapButton»); mapHandler.addEventListener(«click», () => { document.querySelector(«iframe»).requestFullscreen(); });

12345 let mapHandler = document.querySelector(«.mapButton»); mapHandler.addEventListener(«click», () => {      document.querySelector(«iframe»).requestFullscreen();});

Шаг 2 — Выход из полноэкранного режима

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

Однако, если вы хотите реализовать его с помощью кнопки, вы можете использовать метод exitFullscreen(). Этот метод переключит текущий элемент обратно в оконный режим из полноэкранного.

В моем примере я создал кнопку «Exit Fullscreen» и использовал слушателей событий для запуска метода exitFullscreen().

JavaScript let mapHandler = document.querySelector(«.mapButton»); mapHandler.addEventListener(«click», () => { document.querySelector(«iframe»).requestFullscreen(); });

12345 let mapHandler = document.querySelector(«.mapButton»); mapHandler.addEventListener(«click», () => {      document.querySelector(«iframe»).requestFullscreen();});

Шаг 3 — включение и отключение полноэкранного режима

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

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

document.fullscreenEnabled — Это свойство проверяет, поддерживает ли браузер полноэкранный режим и разрешено ли это пользователем.

document.fullscreenElement — Это свойство возвращает текущий элемент в полноэкранном режиме. Возвращает null, если мы не в полноэкранном режиме.

Функция toggleFullscreen() будет выглядеть следующим образом.

Создание полноэкранных веб-приложений

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript toggleFullscreen = () => { if (document.fullscreenEnabled) { if (document.fullscreenElement) { document.exitFullscreen(); } else { document.documentElement.requestFullscreen(); } } else { alert(«Fullscreen is not supported!»); } }

1234567891011 toggleFullscreen = () => {  if (document.fullscreenEnabled) {    if (document.fullscreenElement) {      document.exitFullscreen();    } else {      document.documentElement.requestFullscreen();    }  } else {    alert(«Fullscreen is not supported!»);  }}

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

JavaScript // Button Click let toggler = document.querySelector(«.toggler»); toggler.addEventListener(«click», () => { toggleFullscreen(); }); //Keyboard Key Press document.addEventListener(«keydown», (e) => { if (e.key === «Enter») { toggleFullscreen(); } });

123456789101112 // Button Clicklet toggler = document.querySelector(«.toggler»);toggler.addEventListener(«click», () => {    toggleFullscreen();}); //Keyboard Key Pressdocument.addEventListener(«keydown», (e) => {  if (e.key === «Enter») {      toggleFullscreen();  }});

Создание полноэкранных веб-приложений

Шаг 4 – Стилизация полноэкранного режима

Мы можем добавить определенные стили для полноэкранных элементов с помощью псевдокласса CSS :fullscreen. Затем, когда пользователь запрашивает полноэкранный режим, к пользовательскому интерфейсу будут применены стили.

Если я применяю приведенный ниже класс CSS к желтому элементу фона

в приведенном выше примере, его цвет будет изменен на коричневый, цвет шрифта — на белый, а текст выровнен по центру экрана.

CSS p:fullscreen { display: flex; align-items: center; background-color: brown; color: white; }

123456 p:fullscreen {  display: flex;  align-items: center;  background-color: brown;  color: white;}

Создание полноэкранных веб-приложений

Совет: мы можем использовать псевдоэлемент ::backdrop для стилизации элемента, который находится непосредственно под полноэкранным элементом.

Использование префиксов

Как я уже упоминал ранее, браузер Safari частично поддерживает функции, которые мы обсуждали выше.
Чтобы решить эту проблему, полноэкранный API поставляется в комплекте с префиксами для каждого метода и свойства, которые мы обсуждали ранее.

Эти префиксы представляют собой часто используемые браузеры, такие как Firefox, Edge и движок Apple WebKit.
Чаще всего используются префиксы mos-, ms- и webkit-.

Например, мы можем использовать mozRequestFullScreen(), msRequestFullscreen() и webkitRequestFullscreen() для входа в полноэкранный режим.

Совет: вы можете найти полный список префиксов для полноэкранного API в MDN Docs.

Заключение

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

Полноэкранный API предоставляет множество функций, с которыми можно поиграть. Но удобство использования полноэкранного API зависит от среды браузера.

Тем не менее, мы можем легко преодолеть проблемы совместимости, используя префиксы или сторонние библиотеки, такие как react-fullscreen, react-hooks-full-screen, screenfull.js и fscreen. Спасибо за чтение!!!

Автор: Dulanka Karunasena

Источник: webformyself.com

Оставьте ответ

Ваш электронный адрес не будет опубликован.