JavaScript

Como ativar a tela cheia do navegador com JavaScript

22 de agosto de 2020

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.

como ativar a tela cheia com javascript

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

Subscribe
Notify of
guest
1 Comentário
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
geoge trindade

Tem uma opção para navegadores mobiles?

1
0
Would love your thoughts, please comment.x