Comment créer une fenêtre en plein écran avec Javascript (étirement sur tout l'écran)

Introduction

Réaliser un affichage complet L'expérience sur écran pour les visiteurs de votre site Web est cruciale pour un contenu immersif. Dans le passé, cela était difficile en raison de problèmes de compatibilité des navigateurs. Cependant, avec l'avènement des navigateurs modernes et les progrès de JavaScript, il est devenu possible de faire passer une fenêtre en plein écran avec une relative facilité.

Solution

Pour créer un le navigateur du visiteur passe en plein écran à l'aide de JavaScript, vous pouvez exploiter les éléments suivants approche :

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

Copier après la connexion

Explication

La fonction requestFullScreen() vérifie les méthodes de requête natives en plein écran prises en charge par différents navigateurs.
Si une méthode native est disponible, elle appelle cette méthode sur l'élément spécifié (dans ce cas, l'élément body pour remplir la page entière écran).
Pour les anciennes versions d'Internet Explorer, il utilise un ActiveXObject pour envoyer la frappe F11, qui déclenche le mode plein écran.

Notes supplémentaires

Le mode plein écran nécessite le consentement de l'utilisateur. Il est donc important qu'une action soit initiée par l'utilisateur (par exemple, un bouton cliquez) pour déclencher la demande.
Certains navigateurs plus anciens peuvent ne pas prendre entièrement en charge cette fonctionnalité, il est donc recommandé de vérifier la compatibilité du navigateur avant de mettre en œuvre cette solution.

Référence