Passer en plein écran en javascript
Alors que je développais son application web, un client m'a demandé si on pouvait passer le navigateur en plein écran.
J'allais lui conseiller une simple pression sur la touche F11 mais je savais pertinemment qu'il l'oublierait vite et qu'il me reposerait la question quelques semaines plus tard.
Loin des yeux, loin du cœur, j'ai vite compris que les humains avaient besoin d'avoir l'outil devant les yeux pour penser à l'utiliser.
Voici donc quelques lignes de codes en javascript, couplées à un simple bouton en HTML (dans l'exemple, j'ai utilisé "Fontawesome"), permettant le passage d'un navigateur en plein écran.
Le code javascript:
/** * Toggle fullscreen fonctionne avec les navigateurs webkit et firefox. * @function toggleFullscreen * @param {Object} event */ function toggleFullscreen(event) { var element = document.body; var fsbutton = document.getElementById('toggle'); if (event instanceof HTMLElement) { element = event; } var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false; element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () { return false; }; document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () { return false; }; if ( isFullscreen ) { document.cancelFullScreen(); fsbutton.classList.remove('fa-compress-arrows-alt'); fsbutton.classList.add('fa-arrows-alt'); } else { element.requestFullScreen(); fsbutton.classList.remove('fa-arrows-alt'); fsbutton.classList.add('fa-compress-arrows-alt'); } }
Le code HTML:
<a href="#" onclick="toggleFullscreen(); return false;"><span><i id="toggle" class="fa fa-arrows-alt"></i></span></a>
Évidemment, inutile d'appliquer ce code si votre application nécessite un chargement de page lequel vous ferait immédiatement quitter le plein écran.
Dans mon cas, toute l'application fonctionnait en Ajax et donc sans rechargement/rafraichissement de la page active.