Como detectar se a aba do navegador não esta ativa com JavaScript

Neste artigo você vai aprender a como detectar se a aba do navegador não esta ativa com JavaScript, utilizando um evento nativo do DOM

Fala programador(a), beleza? Bora aprender mais sobre navegador, DOM e JavaScript!

Antigamente para acessar e verificar se o usuário não está com a aba ativa era muito mais trabalhoso

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Com a evolução da linguagem JS, temos uma solução que abrange amplamente os navegadores

Vamos criar um evento em document que tem o nome de visibilitychange, ele funciona da mesma forma que qualquer outro

Nós podemos passar uma função anônima que executa algo quando o evento acontece

Ou seja, o nosso evento fica observando se aba fica inativa ou não

Veja o código necessário:

document.addEventListener("visibilitychange", function() {
	console.log("Mudou de aba!")
});

Note que adicionamos o evento ao document, agora ele monitora a aba que tem o código

A função anônima pode ser da sua escolha, e passar qualquer outra função como segundo parâmetro

Ela será automaticamente executada quando a aba não for mais ativa

Conclusão

Neste artigo você aprendeu a como detectar se a aba do navegador não esta ativa com JavaScript

Utilizamos os eventos de DOM, mais especificamente o visibilitychange

Este evento monitora a aba atual, e ativa alguma função quando ela fica inativa

Podemos executar qualquer função da nossa escolha quando este evento ocorrer, assim como exibido no exemplo acima

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!