JS властивість Event.fullscreenchange

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

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

Для того щоб викликати повноекранний режим, використовується метод requestFullscreen() на елементі, наприклад:

const element = document.getElementById('myElement');
element.requestFullscreen();

Коли елемент переходить у повноекранний режим, спрацьовує подія fullscreenchange. Ви можете додати обробник цієї події на document або безпосередньо на конкретний елемент, щоб реагувати на зміну стану.

Приклад додавання обробника:

document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    console.log('Елемент увійшов у повноекранний режим:', document.fullscreenElement);
  } else {
    console.log('Вийшли з повноекранного режиму');
  }
});

У цьому прикладі, коли сторінка входить або виходить із повноекранного режиму, у консоль виводиться відповідне повідомлення. Змінну document.fullscreenElement можна використовувати для перевірки, який елемент зараз знаходиться в повноекранному режимі.

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

Для виходу з повноекранного режиму використовується метод document.exitFullscreen(), і після цього також спрацює подія fullscreenchange.

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

правити

Порада

Важливо перевіряти підтримку повноекранного режиму в різних браузерах. Не всі браузери однаково обробляють цю функцію, тому варто передбачити поліфіли або перевірку наявності requestFullscreen() і exitFullscreen() методів.

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

Порада

У складних інтерфейсах можна використовувати fullscreenchange для зміни розмірів і адаптації контенту під новий режим. Наприклад, при виході з повноекранного режиму можна повернути елементу його оригінальний розмір або структуру, що змінювалася в процесі.

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

Порада

Якщо ви хочете знати, який саме елемент знаходиться в повноекранному режимі, використовуйте змінну document.fullscreenElement. Вона допоможе вам ідентифікувати елемент і динамічно змінювати його параметри.

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

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

Синтаксис

document.addEventListener('fullscreenchange', function(event) {
  // Код, що виконується при спрацюванні події
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<video id="videoControls" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

document.addEventListener('fullscreenchange', function() {
  if (!document.fullscreenElement) {
    document.getElementById('videoControls').style.display = 'block';
    console.log('Відновлено видимість елементів після виходу з повноекранного режиму');
  }
});

document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    document.body.style.backgroundColor = 'black';
    console.log('Екран у повноекранному режимі, змінено фон сторінки на чорний');
  } else {
    document.body.style.backgroundColor = 'white';
    console.log('Вихід з повноекранного режиму, фон сторінки змінено на білий');
  }
});