Obtenez une fenêtre plein écran en JavaScript

Dans ce tutoriel, nous allons apprendre comment obtenir une fenêtre plein écran en utilisant JavaScript.

L’API plein écran nous aide à utiliser le code JavaScript pour convertir une page Web en mode plein écran. Nous pouvons l’appliquer à l’ensemble du document ou à un élément individuel.

Vérifiez l’exemple ci-dessous.

function getFullscreenElement() {
  return document.fullscreenElement        // standard property
      || document.webkitFullscreenElement  // safari/opera support
      || document.mozFullscreenElement     // firefox support
      || document.msFullscreenElement;     // ie/edge support
}
function toggleFullscreen() {
  if (getFullscreenElement()) {
    document.exitFullscreen();
  } else {
    document.getElementById('container')
        .getFullscreenElement()
        .catch(console.log);
  }
}

Dans le code ci-dessus, il existe quatre options différentes dans la fonction getFullscreenElement() telles que document.fullscreenElement, document.webkitFullscreenElement, document.mozFullscreenElement et document.msFullscreenElement, ce qui rend le plein écran commande compatible avec presque tous les navigateurs.

Le toggleFullscreen() fait entrer la fenêtre dans un mode plein écran qui n’est pas en mode plein écran, et vice-versa en cliquant sur le bouton Entrer en plein écran. Nous pouvons appeler cette fonction sur des éléments donnés de la manière suivante.

document.getElementById('button').addEventListener('click', () => {
  toggleFullscreen();