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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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

Nova seção curta: ‘Como desativar a mensagem ao fechar página:’ explicando que basta zerar o evento, com o exemplo window.onbeforeunload = null e o porquê (assim que os dados foram salvos, ou o usuário confirmou, tu tira o aviso pra não incomodar de novo)

Mostrar a forma equivalente usando window.addEventListener(‘beforeunload’, function(e){ … }) com e.preventDefault() e e.returnValue definido, explicando que é a mesma ideia porém sem sobrescrever um possível handler já existente na window

Um exemplo de código do disparo CONDICIONAL: uma flag (ex: formAlterado = true quando o usuário digita) e o onbeforeunload só devolve a mensagem se essa flag estiver ligada, senão deixa sair liso

3 perguntas curtas respondidas em 1 a 2 linhas: ‘Dá pra personalizar o texto ou o estilo do pop up?’ (não, o navegador controla a aparência e pode variar de um pro outro, o post já toca nisso), ‘Como tirar o aviso depois?’ (zera com window.onbeforeunload = null), e ‘Qual a diferença entre onbeforeunload e onunload?’ (o beforeunload roda ANTES de sair e permite o questionamento, o unload roda quando a página já está indo embora e não serve pra segurar o usuário)