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 є важливим інструментом для керування інтерфейсом, що використовує повноекранний режим, і дозволяє розробникам створювати більш інтерактивний та динамічний користувацький досвід.
| Порада: | Комбінуйте |
| Порада: | Для виявлення помилок перевірте, чи |
| Порада: | Якщо використовуєте |
Синтаксис
document.fullscreenElement;Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
71 |
64 |
16.4 |
58 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
71 |
71 |
64 |
16.4 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може вибрати, який елемент (зображення або текстовий блок) відображати у повноекранному режимі, і одразу побачити оновлений статус про активний елемент. Це робить зручним перемикання між повноекранними елементами та дозволяє інтерактивно спостерігати за роботою fullscreenElement.
У цьому прикладі повноекранний режим автоматично налаштовує інтерфейс залежно від активного елемента. Коли елемент знаходиться в повноекранному режимі, його фон змінюється на чорний, що покращує сприйняття відео або інших медіа.
document.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement) {
console.log("Елемент у повноекранному режимі:", document.fullscreenElement.tagName);
document.fullscreenElement.style.backgroundColor = "black"; // Темний фон для повноекранного вигляду
} else {
console.log("Жоден елемент не знаходиться у повноекранному режимі.");
}
});
// Запуск повноекранного режиму для елементу з ID "videoPlayer"
document.getElementById("videoPlayer").requestFullscreen();Цей приклад автоматично виходить з повноекранного режиму, якщо активний елемент змінюється. Це корисно для додатків, де лише певні елементи повинні підтримувати повноекранний режим, і забезпечує плавний перехід між елементами.
document.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement && document.fullscreenElement.id === "gallery") {
console.log("Повноекранний режим активовано для галереї.");
} else if (!document.fullscreenElement) {
console.log("Вийшли з повноекранного режиму.");
} else {
document.exitFullscreen().then(() => console.log("Вийшли з повноекранного режиму через зміну елемента."));
}
});
// Запуск повноекранного режиму для галереї
document.getElementById("gallery").requestFullscreen();