L'API JavaScript Full Screen

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul UnderwoodPaul Underwood, Javascript FullScreen API.

L'API full screen (mode plein écran) est un moyen facile d'obtenir le contenu Web complet que vous voulez afficher en mode plein écran. Il est très similaire à la touche F11 de votre clavier, mais laisse le choix aux développeurs. C'est une fonctionnalité intéressante à utiliser par exemple avec des diaporamas, vous pouvez renverser le navigateur en mode plein écran via le clic sur une image.

La meilleure chose à propos de cette fonctionnalité est que l'élément ne doit pas être une page entière, vous pouvez mettre n'importe quel élément HTML en plein écran. Cela signifie que plutôt que de toujours mettre la page entière en mode plein écran, vous n'avez qu'à assigner l'API full screen à une image et au moment du clic sur l'image, vous n'afficherez que l'image en mode plein écran.

Malheureusement, tous les navigateurs ne prennent pas en charge cette fonctionnalité donc vous avez besoin de vous assurer que le navigateur de vos visiteurs prend en charge cette fonctionnalité avant d'essayer de l'utiliser.

Si le navigateur qu'ils utilisent supporte l'API, alors vous pouvez l'utiliser. Si le navigateur ne la supporte pas, alors vous pouvez être sûr que vous allez devoir faire autre chose que d'utiliser le mode plein écran.

Selon le site Can I UseCan I use ?, sont actuellement compatibles les navigateurs suivants :

• Chrome 15+ ;
• Firefox 10+ ;
• Safari 5.1+ ;
• Opera 12.50+.

Safari 5.1 ne supporte pas l'utilisation du clavier en mode plein écran.

III-A. Vérifier que le navigateur supporte l'API▲

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

III-B. Quitter le mode plein écran▲

if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

III-C. Personnalisation▲

html:-moz-full-screen {
    background: red;
}
html:-webkit-full-screen {
    background: red;
}
html:fullscreen {
    background: red;
}

J'ai récemment découvert un bon plugin JavaScript sur GitHub qui agit comme une couche pour l'API du mode plein écran du HTML5. L'avantage d'utiliser ce plugin au lieu du JavaScript brut est qu'il gère tous les problèmes de compatibilité des navigateurs que vous obtenez lorsque vous travaillez avec le JavaScript brut.

Un attribut statique est visible à la fois depuis la classe et depuis n'importe quelle instance de la classe.

Pour utiliser screenfull.js, c'est très facile. Tout ce que vous devez faire est d'utiliser l'extrait de code suivant :

if ( screenfull ) {
    screenfull.request();
}

Pour télécharger screenfull.js, vous devez aller sur la page GitHub du projet.

Pour utiliser screenfull.js, c'est très simple. Voici quelques exemples d'utilisation.

Pour vérifier si le mode plein écran est pris en charge, utilisez l'extrait de code suivant :

<script>
$(function() {
if(screenfull)
{
    $('#supported').text('Oui');
} else {
    $('#supported').text('Non');
}
});
</script>
Votre navigateur supporte-t-il l'API full screen ? <span id="supported"></span>

Lorsque vous savez que le navigateur prend en charge l'API, vous pouvez activer le mode plein écran sur un événement click d'un bouton tout simplement en utilisant ce code :

var target = $('#target')[0]; // Récupère l'élément du DOM d'après la collection d'objets jQuery
$('#button').click(function() {
    if ( screenfull ) {
        screenfull.request( target );
    }
});

Vous pouvez également joindre cela à toutes les images de la page à l'aide de cet extrait de code :

$('img').click(function() {
     if ( screenfull ) {
     screenfull.toggle( this );
     }
});

Regardez la démonstrationDémo pour voir des exemples d'utilisation de screenfull.js.

Nous avons vu dans ce tutoriel comment utiliser l'API JavaScript full screen sur des éléments HTML.

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

Je tiens à remercier Paul UnderwoodPaul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.