Освоение JavaScript: Полное руководство по Fullscreen API

Введение в Fullscreen API JavaScript

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

Включение полноэкранного режима в JavaScript

Для включения полноэкранного режима в JavaScript разработчики используют метод requestFullscreen. Этот метод является частью Fullscreen API и применяется к любому DOM элементу, который вы хотите отобразить в полноэкранном режиме. Обратите внимание, что API требует действия пользователя (например, клика) для активации, поэтому он обычно вызывается внутри обработчика событий. Вот как эффективно использовать этот метод:

---

<div id="main-content">
    <button id="fs-btn">Go Fullscreen</button>
    <div id="video-container">
        <!-- Your content like a video or interactive media -->
    </div>
</div>

<script>
const element = document.getElementById("video-container");
const btn = document.getElementById("fs-btn");

btn.addEventListener("click", function() {
    if (document.fullscreenEnabled) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable fullscreen: ${err.message}`);
        });
    } else {
        console.log("Fullscreen API is not supported in this browser.");
    }
});
</script>

Этот фрагмент кода демонстрирует, как активировать полноэкранный режим для конкретного элемента (video-container) с помощью кнопки. Скрипт проверяет доступность API перед попыткой входа в полноэкранный режим, обеспечивая широкую совместимость с современными браузерами. Использование addEventListener сохраняет разметку чистой и соответствует современным лучшим практикам.

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

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

---

<div id="exit-button">
    <button id="exit-btn">Exit Fullscreen</button>
</div>

<script>
document.getElementById("exit-btn").addEventListener("click", function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
});
</script>

В этом примере функция exitFullScreen позволяет пользователю выйти из полноэкранного режима, нажав кнопку «Выйти из полноэкранного режима». Обратите внимание, что document.exitFullscreen() завершает полноэкранный режим для текущего активного элемента, независимо от того, какой элемент изначально инициировал запрос.

Обработка изменений полноэкранного режима с помощью событий

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

---

document.addEventListener("fullscreenchange", function(event) {
    if (document.fullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});

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

document.addEventListener("fullscreenerror", function(event) {
    console.error("Fullscreen request failed:", event.target.error);
});

Теперь давайте объединим всё вместе и посмотрим на это в примере:

Полный пример:

---

<div id="main-content">
    <button id="fs-btn">Go Fullscreen</button>
    <div id="video-container" style="position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;">
        <div id="exit-button" style="display: none;">
            <button id="exit-btn">Exit Fullscreen</button>
        </div>
    </div>
</div>

<script>
const element = document.getElementById("video-container");
const exitBtn = document.getElementById("exit-btn");
const exitButtonContainer = document.getElementById("exit-button");

document.getElementById("fs-btn").addEventListener("click", function() {
    if (document.fullscreenEnabled) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable fullscreen: ${err.message}`);
        });
    }
});

exitBtn.addEventListener("click", function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
});

function updateButtonVisibility() {
    exitButtonContainer.style.display = document.fullscreenElement ? "block" : "none";
}

document.addEventListener("fullscreenchange", updateButtonVisibility);
document.addEventListener("fullscreenerror", function(event) {
    console.error("Fullscreen request failed:", event.target.error);
});
</script>

Try it Yourself »

Рассмотрим функциональность кода:

Функции JavaScript- goFullScreen(): Эта функция переводит контейнер видео в полноэкранный режим. Сначала она проверяет, поддерживает ли браузер Fullscreen API через document.fullscreenEnabled, а затем вызывает стандартный метод requestFullscreen() метода.

• exitFullScreen(): Эта функция выходит из полноэкранного режима с помощью стандартного метода document.exitFullscreen() метода.

Обработчики событий для изменений полноэкранного режима- updateButtonVisibility(): Эта функция регулирует видимость кнопки выхода в зависимости от того, находится ли какой-либо элемент в полноэкранном режиме.

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

Совместимость и поддержка браузерами

Fullscreen API JavaScript широко поддерживается в современных браузерах, включая Chrome, Firefox, Safari, Opera и Edge. Современные реализации используют стандартные методы без вендорных префиксов. Исторически Safari требовал префикс -webkit- (webkitRequestFullscreen, webkitExitFullscreen), но текущие версии полностью поддерживают стандарт без префиксов. Для стилизации элементов в полноэкранном режиме можно использовать псевдокласс CSS :fullscreen:

:fullscreen {
    background-color: #000;
    color: #fff;
    padding: 20px;
}

Заключение

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

Практика

Какие из следующих утверждений верны относительно Fullscreen API JavaScript?

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