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

Что такое полноэкранный 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