Exibir uma mensagem ao fechar página / fechar aba

Neste artigo você vai aprender a exibir uma mensagem ao fechar página, quando o usuário tentar sair do site, utilizando JavaScript e de maneira simples

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre a execução de eventos ao sair de uma página com JavaScript

É exatamente o que você leu, vamos criar um evento para esta ação de sair da página 🙂

O nome do evento é onbeforeunload, ele dispara quando o usuário tenta fechar a página

Podemos adicionar ao objeto global window, que ele estará sempre presenta esperando o movimento do visitante

Veja uma aplicação prática:

window.onbeforeunload = function(e) {
   return "Quer realmente sair do site?";
};

Ao adicionar este código, a mensagem sempre aparecerá em forma de pop up, não temos como controlar o estilo deste elemento

E pode haver uma variação ou outra, dependendo do navegador que o visitante está utilizando

Note que esta prática atrapalha a usabilidade do seu site, o que pode gerar um desconforto por parte do usuário

Então utilize com cuidado esta funcionalidade, uma aplicação interessante seria quando há dados a serem salvos e o usuário tentou sair da página

Podendo ser uma ação involuntária, então podemos adicionar o questionamento e verificar se ele realmente deseja sair, para não perder todo o progresso do que estava digitando

Conclusão

Neste artigo aprendemos a como exibir uma mensagem ao fechar página, ou seja, quando o usuário tenta fechar a aba

Utilizamos JavaScript para isso, adicionando um evento a window

O evento é o onbeforeunload, que é disparado quando um usuário tenta sair da sua página clicando no ícone de fechar

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