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 дозволяє зручно інтегрувати повноекранний режим для будь-якого елемента, підвищуючи якість взаємодії користувача із сайтом або застосунком.

Синтаксис

element.requestFullscreen();

Параметри

Return

Promise

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

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 = "Переглянути галерею на весь екран";
  }
});