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 можна ефективно управляти поведінкою інтерфейсу користувача, забезпечуючи комфортні умови для роботи в різних режимах.
| Порада: | Важливо перевіряти підтримку повноекранного режиму в різних браузерах. Не всі браузери однаково обробляють цю функцію, тому варто передбачити поліфіли або перевірку наявності |
| Порада: | У складних інтерфейсах можна використовувати |
| Порада: | Якщо ви хочете знати, який саме елемент знаходиться в повноекранному режимі, використовуйте змінну |
Синтаксис
document.addEventListener('fullscreenchange', function(event) {
// Код, що виконується при спрацюванні події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач взаємодіє з кнопкою, яка дозволяє перемикати елемент у повноекранний режим та виходити з нього. Коли елемент входить у повноекранний режим, відбувається зміна його розмірів та стилів за допомогою додавання класу fullscreen-mode. Подія fullscreenchange дозволяє динамічно змінювати текст кнопки, залежно від поточного стану повноекранного режиму.
Цей приклад демонструє, як можна відслідковувати вихід із повноекранного режиму і автоматично відновлювати видимість панелі керування відео, яка була прихована під час перегляду у повноекранному режимі.
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('Вихід з повноекранного режиму, фон сторінки змінено на білий');
}
});