Obtener una ventana de pantalla completa en JavaScript

En este tutorial, aprenderemos cómo obtener una ventana de pantalla completa usando JavaScript.

La API de pantalla completa nos ayuda a usar código JavaScript para convertir una página web al modo de pantalla completa. Podemos aplicarlo a todo el documento o a un elemento individual.

Mira el ejemplo a continuación.

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);
  }
}

En el código anterior, hay cuatro opciones diferentes en la función getFullscreenElement() como document.fullscreenElement, document.webkitFullscreenElement, document.mozFullscreenElement y document.msFullscreenElement, que hace que la pantalla sea completa comando compatible con casi todos los navegadores.

El toggleFullscreen() hace que la ventana entre en un modo de pantalla completa que no está en modo de pantalla completa, y viceversa haciendo clic en el botón Entrar en pantalla completa. Podemos llamar a esta función en elementos dados de la siguiente manera.

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