JS властивість Fullscreen.fullscreenElement

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

fullscreenElement — це властивість об'єкта document, яка показує, який елемент наразі знаходиться у повноекранному режимі. Якщо на сторінці є елемент, який відображається у повноекранному режимі, ця властивість поверне посилання на нього. Якщо жоден елемент не перебуває у повноекранному режимі, fullscreenElement повертає null. Ця властивість надзвичайно корисна для перевірки статусу повноекранного режиму перед виконанням дій, що залежать від його активності.

Для роботи з fullscreenElement часто використовуються такі методи, як requestFullscreen() та exitFullscreen(). Наприклад, якщо ви хочете автоматично вийти з повноекранного режиму після певної події, ви можете перевірити, чи елемент знаходиться в повноекранному режимі, звертаючись до fullscreenElement. Це дозволяє уникнути непотрібних викликів exitFullscreen(), коли сторінка вже знаходиться у звичайному режимі.

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

if (document.fullscreenElement) {
  console.log("Елемент у повноекранному режимі:", document.fullscreenElement);
} else {
  console.log("Жоден елемент не знаходиться у повноекранному режимі.");
}

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

Таким чином, fullscreenElement є важливим інструментом для керування інтерфейсом, що використовує повноекранний режим, і дозволяє розробникам створювати більш інтерактивний та динамічний користувацький досвід.

правити

Порада

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

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

Порада

Для виявлення помилок перевірте, чи fullscreenElement повертає null. Це означає, що повноекранний режим недоступний, і можна або повторити запит на requestFullscreen(), або обробити ситуацію інакше.

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

Порада

Якщо використовуєте fullscreenElement для перевірки статусу на мобільних пристроях, пам'ятайте, що підтримка повноекранного режиму може бути обмежена, тому слід перевіряти і сумісність.

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

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

Синтаксис

document.fullscreenElement;

Переглядачі

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

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

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

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

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

Приклади

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

<div id="gallery">
    <img src="/img/logo.svg" width="100" alt="1">
    <img src="/img/logo.svg" width="100" alt="2">
</div>
<button id="fs">Галерею на весь екран</button>

document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement && document.fullscreenElement.id === 'gallery') {
        console.log('Повноекранний режим активовано для галереї.');
    } else if (!document.fullscreenElement) {
        console.log('Вийшли з повноекранного режиму.');
    }
});

document.getElementById('fs').addEventListener('click', () => {
    document.getElementById('gallery').requestFullscreen()
        .catch(error => console.log('Не дозволено:', error.message));
});

<img id="videoPlayer" src="/img/logo.svg" width="120" alt="Демо">
<button id="fs">На весь екран</button>

document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log('У повноекранному режимі:', document.fullscreenElement.tagName);
    } else {
        console.log('Повноекранний режим вимкнено.');
    }
});

document.getElementById('fs').addEventListener('click', () => {
    // потрібен жест користувача, інакше запит відхиляється
    document.getElementById('videoPlayer').requestFullscreen()
        .catch(error => console.log('Не дозволено:', error.message));
});