Como ativar a tela cheia do navegador com JavaScript

Neste artigo você vai aprender a ativar a tela cheia do navegador com JavaScript puro, de uma maneira bem simples e eficaz.

Fala programador(a), beleza? Bora aprender mais sobre eventos e também como ativar a tela cheia a partir de JavaScript!

A ideia por trás de fazer o JavaScript colocar o usuário em modo tela cheia é utilizar uma API do JS para Full screen

Podemos fazer isso através de um evento de click , pois somente o usuário pode controlar este comportamento

Veja um exemplo:

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

Essa função foi retirada da API de FullScreen do MDN, onde você pode acessar as outras funcionalidades da mesma

A partir desta função você pode adicionar um botão no HTML e um evento de click para este botão que chama a função

Veja um exemplo:

const btn = document.querySelector("#btn");

btn.addEventListener("click", function() {
    toggleFullScreen();
});

Desta maneira o botão de id btn estará responsável pelo evento de Tela cheia ou Full Screen com JavaScript

A documentação também menciona que em alguns navegadores não é possível realizar a mudança para full screen com JavaScript, então tome cuidado

E lembre-se também que o evento de tela cheia deve ser sempre chamado pelo usuário, não podemos fazer de forma automática, ou seja, impor a tela cheia

Conclusão

Neste artigo vimos como ativar a tela cheia do navegador com JavaScript

Utilizamos uma função que chama a API de Full Screen do JavaScript, que possibilita o usuário a alternar a tela cheia

Atrelamos também este efeito ao vento de clique em um botão no nosso HTML

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube