JavaScript Fullscreen-API

Einführung in die JavaScript Fullscreen-API

In der Webentwicklung sind ansprechende Benutzererfahrungen von größter Bedeutung, und die JavaScript Fullscreen-API spielt dabei eine entscheidende Rolle. Dieses leistungsstarke Tool ermöglicht es Entwicklern, die Vollbildanzeige eines Elements programmatisch anzufordern, was das Viewerlebnis für medienintensive Anwendungen, Spiele und andere interaktive Inhalte erheblich verbessert.

Aktivieren des Vollbildmodus in JavaScript

Um den Vollbildmodus in JavaScript zu aktivieren, verwenden Entwickler die Methode requestFullscreen. Diese Methode ist Teil der Fullscreen-API und wird auf jedes DOM-Element angewendet, das im Vollbild angezeigt werden soll. Beachten Sie, dass die API eine Benutzerinteraktion (z. B. einen Klick) zur Auslösung erfordert, weshalb sie typischerweise innerhalb eines Event-Handlers aufgerufen wird. So verwenden Sie diese Methode effektiv:

---

<div id="main-content">
    <button id="fs-btn">Go Fullscreen</button>
    <div id="video-container">
        <!-- Your content like a video or interactive media -->
    </div>
</div>

<script>
const element = document.getElementById("video-container");
const btn = document.getElementById("fs-btn");

btn.addEventListener("click", function() {
    if (document.fullscreenEnabled) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable fullscreen: ${err.message}`);
        });
    } else {
        console.log("Fullscreen API is not supported in this browser.");
    }
});
</script>

Dieses Code-Snippet zeigt, wie der Vollbildmodus für ein bestimmtes Element (video-container) über einen Button ausgelöst wird. Das Skript prüft vor dem Eintritt in den Vollbildmodus die Verfügbarkeit der API, um eine breite Kompatibilität mit modernen Browsern zu gewährleisten. Die Verwendung von addEventListener hält das Markup sauber und folgt modernen Best Practices.

Beenden des Vollbildmodus

Um ein umfassendes Benutzererlebnis zu bieten, ist es auch entscheidend zu wissen, wie man den Vollbildmodus beendet. Benutzer oder Entwickler möchten möglicherweise eine Option anbieten, um nach dem Eintritt in den Vollbildmodus zur Standardansicht zurückzukehren. So können Sie diese Funktionalität implementieren:

---

<div id="exit-button">
    <button id="exit-btn">Exit Fullscreen</button>
</div>

<script>
document.getElementById("exit-btn").addEventListener("click", function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
});
</script>

In diesem Beispiel ermöglicht die Funktion exitFullScreen dem Benutzer, den Vollbildmodus durch Klicken auf einen „Vollbild beenden“-Button zu verlassen. Beachten Sie, dass document.exitFullscreen() das aktuell aktive Vollbildelement verlässt, unabhängig davon, welches Element ursprünglich die Anfrage ausgelöst hat.

Behandeln von Vollbildänderungen mit Events

Die Fullscreen-API bietet Events, die Sie benachrichtigen, wenn ein Element den Vollbildmodus betritt oder verlässt. Dies ist besonders nützlich zum Umschalten von Benutzeroberflächenelementen oder zum Auslösen anderer Änderungen in Ihrer Anwendung:

---

document.addEventListener("fullscreenchange", function(event) {
    if (document.fullscreenElement) {
        console.log("Entered fullscreen mode");
    } else {
        console.log("Exited fullscreen mode");
    }
});

Dieser Event-Listener protokolliert Nachrichten in der Konsole, je nachdem, ob sich das Dokument im Vollbildmodus befindet oder nicht, und hilft Entwicklern, die Zustandsübergänge zu verstehen. Darüber hinaus sollten Sie das Event fullscreenerror behandeln, um Fälle abzufangen, in denen der Browser die Anfrage ablehnt (z. B. aufgrund von Sicherheitseinschränkungen oder Benutzerabbruch):

document.addEventListener("fullscreenerror", function(event) {
    console.error("Fullscreen request failed:", event.target.error);
});

Nun fügen wir alles zusammen und sehen es in einem Beispiel:

Ein vollständiges Beispiel:

---

<div id="main-content">
    <button id="fs-btn">Go Fullscreen</button>
    <div id="video-container" style="position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;">
        <div id="exit-button" style="display: none;">
            <button id="exit-btn">Exit Fullscreen</button>
        </div>
    </div>
</div>

<script>
const element = document.getElementById("video-container");
const exitBtn = document.getElementById("exit-btn");
const exitButtonContainer = document.getElementById("exit-button");

document.getElementById("fs-btn").addEventListener("click", function() {
    if (document.fullscreenEnabled) {
        element.requestFullscreen().catch(err => {
            console.error(`Error attempting to enable fullscreen: ${err.message}`);
        });
    }
});

exitBtn.addEventListener("click", function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
});

function updateButtonVisibility() {
    exitButtonContainer.style.display = document.fullscreenElement ? "block" : "none";
}

document.addEventListener("fullscreenchange", updateButtonVisibility);
document.addEventListener("fullscreenerror", function(event) {
    console.error("Fullscreen request failed:", event.target.error);
});
</script>

Try it Yourself »

Schauen wir uns die Funktionalität des Codes an:

JavaScript-Funktionen- goFullScreen(): Diese Funktion lässt den Videocontainer in den Vollbildmodus wechseln. Sie überprüft zunächst, ob der Browser die Fullscreen-API über document.fullscreenEnabled unterstützt, und ruft dann die Standardmethode requestFullscreen() auf.

• exitFullScreen(): Diese Funktion beendet den Vollbildmodus mit der Standardmethode document.exitFullscreen().

Event-Listener für Vollbildänderungen- updateButtonVisibility(): Diese Funktion passt die Sichtbarkeit des Exit-Buttons basierend darauf an, ob sich aktuell ein Element im Vollbildmodus befindet.

• Der Event-Listener fullscreenchange löst diese Funktion aus, sobald sich der Vollbildstatus ändert, und stellt sicher, dass der Exit-Button nur angezeigt wird, wenn sich der Browser im Vollbildmodus befindet, und andernfalls ausgeblendet wird.

Kompatibilität und Browserunterstützung

Die JavaScript Fullscreen-API wird von modernen Browsern wie Chrome, Firefox, Safari, Opera und Edge weitgehend unterstützt. Moderne Implementierungen verwenden die Standardmethoden ohne Vendor-Prefixes. Historisch benötigte Safari das -webkit--Prefix (webkitRequestFullscreen, webkitExitFullscreen), aber aktuelle Versionen unterstützen den unprefixeden Standard vollständig. Zum Stylen von Elementen im Vollbildmodus können Sie die CSS-Pseudoklasse :fullscreen verwenden:

:fullscreen {
    background-color: #000;
    color: #fff;
    padding: 20px;
}

Fazit

Die Fullscreen-API in JavaScript ist ein leistungsstarkes Tool zur Verbesserung der Benutzererfahrung im Web. Durch die Bereitstellung interaktiver und immersiver Umgebungen können Entwickler das Engagement und die Zufriedenheit der Nutzer erheblich steigern. Die besprochenen Beispiele und Methoden bieten eine Grundlage zur Integration von Vollbildfunktionalitäten in Ihre Webanwendungen und gewährleisten eine reibungslose und ansprechende Benutzererfahrung.

Praxis

Welche der folgenden Aussagen sind bezüglich der JavaScript Fullscreen-API wahr?

Sie ermöglicht es, Webinhalte auf unterstützten Geräten im Vollbildmodus anzuzeigen.Die Fullscreen-API kann die Bildschirmausrichtung des Geräts ändern.Entwickler können den Vollbildmodus für Elemente wie Videos und Bilder umschalten.Die API bietet Methoden, um die Benutzereingabe im Vollbildmodus zu sperren.Sie enthält ein Event, das beim Betreten oder Verlassen des Vollbildmodus ausgelöst wird.