24.03.2025

Confirmando o Fechamento de Abas: Uma Solução em JS para Todos os Navegadores

Resposta Rápida

Para proteger os dados não salvos dos usuários, você pode usar um método eficaz: basta adicionar um manipulador de eventos para beforeunload ao objeto window e definir o returnValue do evento para uma mensagem destinada ao usuário. Isso acionará uma caixa de diálogo de confirmação padrão na maioria dos navegadores. Quão simples é isso? Como um super-herói chegando!

window.onbeforeunload = function(e) {
    e.returnValue = 'Você esqueceu de salvar suas alterações?';
    return e.returnValue; // Essa linha é para suporte a navegadores mais antigos.
};

Garantindo Compatibilidade entre Navegadores

Usando Manipuladores de Eventos

Para navegadores modernos, é aconselhável usar window.addEventListener('beforeunload', eventHandlerFunction) em vez de window.onbeforeunload. Isso é tão agradável quanto encontrar uma moeda brilhante debaixo do travesseiro depois de perder um dente.

window.addEventListener('beforeunload', function (e) {
    e.preventDefault(); // Onde você vai com tanta pressa?
    e.returnValue = ''; // O Chrome requer uma intenção explícita.
    return 'Você gostaria de ficar por mais um tempo?'; // Um empurrão gentil para os indecisos.
});

Safari prefere que você retorne uma string diretamente. Chrome pode ignorar sua mensagem se o usuário ainda não interagiu com a página.

Melhorias Estéticas e Funcionais

Seja cauteloso: acione beforeunload somente quando for absolutamente necessário. É como oferecer um cobertor quentinho quando começa a esfriar, e não no meio de uma onda de calor.

let isDirty = false; // Estado "não limpo" da página

window.addEventListener('beforeunload', function (e) {
    if (!isDirty) {
        return undefined; // Sem problemas, sem checagens necessárias.
    }
    e.preventDefault();
    e.returnValue = ''; // Essa linha é para o Chrome.
    return 'Você tem alterações não salvas. Gostaria de salvá-las?'; // Um lembrete para tomar uma ação.
});

Adicionando Toques Pessoais

Personalize o texto da caixa de diálogo e ajuste sua exibição para melhorar a experiência do usuário. Contudo, tenha em mente que muitos navegadores preferem usar mensagens padrão e podem desconsiderar suas personalizações.

Gerenciando Configurações e Exceções do Usuário

Oferecendo um Caminho Claro

Certos cenários, como fazer logout de um aplicativo ou enviar um formulário, devem ocorrer sem notificações desnecessárias. Lide com essas exceções de forma sábia, garantindo que as checagens padrão sejam ignoradas.

function optOut() {
    window.removeEventListener('beforeunload', byeFelicia); // Saia sem alvoroço.
    // Execute a ação necessária aqui
}

function byeFelicia(e) {
    e.preventDefault();
    e.returnValue = '';
    return 'Saindo tão cedo? Talvez você queira pensar de novo?'; // Uma tentativa de manter o usuário engajado.
}

window.addEventListener('beforeunload', byeFelicia);

Antecipando o Comportamento dos Navegadores

Diferentes navegadores respondem ao evento beforeunload de maneiras variadas. IE pode favorecer e.cancelBubble = true, enquanto outros esperam que e.stopPropagation() seja chamado. Esteja preparado para essas nuances e potenciais inconsistências.

Recursos Úteis

1. Window: evento beforeunload - Web API | MDN
2. javascript - JavaScript antes de sair da página - Stack Overflow
3. Evento onbeforeunload - W3Schools
4. Página: DOMContentLoaded, load, beforeunload, unload - JavaScript.info
5. Guia do Iniciante para Usar Cache de Aplicação – web.dev
6. .on() | Documentação da API jQuery
7. Requisição Ajax com jQuery antes de fechar a página - Stack Overflow

Video

Navigation