Neste artigo você vai aprender a como ativar tela cheia com JavaScript, vamos utilizar uma abordagem super simples!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
Ativar a tela cheia com JavaScript é uma tarefa simples que pode ser realizada com algumas linhas de código.
A tela cheia é uma funcionalidade que permite que o usuário visualize o conteúdo em tela inteira, ocupando todo o espaço disponível na tela do dispositivo.
Isso pode ser útil em muitas situações, como jogos, vídeos e apresentações.
Existem duas formas de ativar a tela cheia com JavaScript: a primeira é através da API de tela cheia do HTML5 e a segunda é através da API Fullscreen.
A primeira API é suportada pelos navegadores mais recentes, enquanto a segunda API é suportada por navegadores antigos.
A seguir, veremos como ativar a tela cheia com as duas APIs.
Ativando a tela cheia com a API de tela cheia do HTML5
A API de tela cheia do HTML5 permite que um elemento seja exibido em tela cheia através do método requestFullscreen().
Para usar a API, basta selecionar o elemento que deseja exibir em tela cheia e chamar o método requestFullscreen() em seu objeto.
Por exemplo, o seguinte código ativará a tela cheia em um elemento de id “meu-elemento”:
const elemento = document.getElementById("meu-elemento");
elemento.requestFullscreen();
Observe que, para usar a API de tela cheia do HTML5, o navegador precisa suportar a funcionalidade. Você pode verificar isso usando a seguinte condicional:
if (elemento.requestFullscreen) {
elemento.requestFullscreen();
} else {
console.log("O navegador não suporta a tela cheia");
}
Ativando a tela cheia com a API Fullscreen
Se o navegador não suporta a API de tela cheia do HTML5, você pode usar a API Fullscreen.
A API Fullscreen permite que o conteúdo seja exibido em tela cheia através do método requestFullScreen().
Por exemplo, o seguinte código ativará a tela cheia em um elemento de id “meu-elemento”:
const elemento = document.getElementById("meu-elemento");
if (elemento.requestFullScreen) {
elemento.requestFullScreen();
} else if (elemento.webkitRequestFullScreen) {
elemento.webkitRequestFullScreen();
} else if (elemento.mozRequestFullScreen) {
elemento.mozRequestFullScreen();
} else {
console.log("O navegador não suporta a tela cheia");
}
Observe que, ao usar a API Fullscreen, é necessário verificar se o navegador suporta o método requestFullScreen().
Além disso, diferentes navegadores podem ter versões diferentes da API, como webkitRequestFullScreen, mozRequestFullScreen e msRequestFullScreen, por isso é importante verificar todas as opções disponíveis.
Para sair da tela cheia, você pode usar o método exitFullscreen() da API de tela cheia do HTML5 ou o método cancelFullScreen() da API Fullscreen. Por exemplo:
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else {
console.log("Não foi possível sair da tela cheia");
}
Lembre-se de verificar as opções disponíveis antes de chamar o método para sair da tela cheia, pois diferentes navegadores podem ter versões diferentes da API.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Em conclusão, ativar a tela cheia com JavaScript é uma tarefa relativamente fácil que pode ser realizada com a API de tela cheia do HTML5 ou a API Fullscreen.
Verificar as opções disponíveis antes de chamar os métodos é crucial para garantir que a funcionalidade seja compatível com diferentes navegadores.
Além disso, sair da tela cheia também é uma tarefa simples que pode ser realizada usando o método apropriado da API.
Em suma, ativar e sair da tela cheia é uma forma fácil e eficiente de melhorar a experiência do usuário em aplicativos e sites web.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!