JS метод Element.requestFullscreen()

Загальний опис

requestFullscreen — це метод, який використовується для активації повноекранного режиму для конкретного елемента на вебсторінці. Виклик цього методу робить вибраний елемент (наприклад, відео, зображення або контейнер) повноекранним, займаючи весь екран пристрою користувача. Ця функція часто використовується для відеоплеєрів, презентацій, слайдшоу тощо, щоб покращити сприйняття контенту без зайвих елементів сторінки.

Для активації повноекранного режиму необхідно викликати requestFullscreen на DOM-елементі, який ми хочемо відобразити у цьому режимі. Наприклад:

document.getElementById("myElement").requestFullscreen();

Цей код намагається зробити елемент з ідентифікатором myElement повноекранним. Оскільки повноекранний режим може бути нав’язливим для користувача, браузери вимагають, щоб requestFullscreen викликався лише в результаті взаємодії користувача (наприклад, натискання кнопки). Якщо метод викликається автоматично або без взаємодії, браузер заблокує цей запит.

Метод повертає об’єкт Promise, що дозволяє обробляти результат успішного перемикання або помилку. Наприклад:

element.requestFullscreen().then(() => {
  console.log("Повноекранний режим увімкнено");
}).catch((error) => {
  console.log("Помилка при перемиканні у повноекранний режим:", error);
});

Під час роботи у повноекранному режимі можна відстежувати зміни стану за допомогою подій fullscreenchange і fullscreenerror. Подія fullscreenchange викликається кожного разу, коли браузер переходить або виходить із повноекранного режиму, дозволяючи відповідним чином оновлювати інтерфейс.

Слід зауважити, що requestFullscreen підтримується не у всіх браузерах і може потребувати префіксів (webkitRequestFullscreen для Safari або mozRequestFullScreen для старих версій Firefox). Щоб забезпечити кросбраузерну підтримку, можна створити функцію:

function goFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  }
}

Таким чином, requestFullscreen дозволяє зручно інтегрувати повноекранний режим для будь-якого елемента, підвищуючи якість взаємодії користувача із сайтом або застосунком.

правити

Порада

Не використовуйте повноекранний режим для нав’язливих елементів, як-от реклами. Користувачі можуть заблокувати його через безпекові налаштування браузера, тому важливо, щоб ця функція використовувалася лише для покращення користувацького досвіду.

автор: Bond правити

Порада

Обробляйте помилки через catch, оскільки у випадку блокування запиту браузером або інших помилок корисно надати повідомлення користувачу про недоступність функції або можливу помилку.

автор: Bond правити

Порада

Щоб відстежити, коли користувач вийшов з повноекранного режиму, використовуйте подію fullscreenchange. Це дозволяє динамічно оновлювати інтерфейс або приховувати непотрібні елементи після завершення повноекранного режиму.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.requestFullscreen();

Повернення

Promise

Повертає Promise, який виконується (resolve) у разі успішного переходу в режим повного екрану або відхиляється (reject), якщо перехід не вдалося здійснити.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	71	64	16.4	58	79	11*

Підтримка: мобільні переглядачі

Переглядач
	71	71	64	16.4*

Приклади

+ запропонувати свій приклад у пісочниці

<img id="imageGallery" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<div id="galleryFullscreen">Демонстраційний елемент</div>

const gallery = document.getElementById("imageGallery");
const fullscreenButton = document.getElementById("galleryFullscreen");

fullscreenButton.addEventListener("click", () => {
  gallery.requestFullscreen()
    .then(() => {
      fullscreenButton.textContent = "Вийти з повного екрану";
    })
    .catch((error) => {
      alert("Повноекранний режим недоступний.");
      console.error(error);
    });
});

document.addEventListener("fullscreenchange", () => {
  if (!document.fullscreenElement) {
    fullscreenButton.textContent = "Переглянути галерею на весь екран";
  }
});

<video id="myVideo" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>
<div id="enterFullscreen">Демонстраційний елемент</div>

const videoElement = document.getElementById("myVideo");
const fullscreenButton = document.getElementById("enterFullscreen");

fullscreenButton.addEventListener("click", () => {
  videoElement.requestFullscreen().then(() => {
    console.log("Відео в повноекранному режимі");
  }).catch((error) => {
    console.error("Не вдалося увімкнути повний екран:", error);
  });
});