26.12.2024

JavaScript: Confirmação Antes de Sair da Página Após Alterações

Resposta Rápida

window.onbeforeunload = function() {
  // Não saia ainda, nem tudo está salvo!
  return mudançasFeitas ? "Suas alterações não estão salvas." : undefined;
};

Para disparar um aviso, use window.onbeforeunload. A variável mudançasFeitas retorna true se houver alterações não salvas. Nesse caso, uma mensagem de confirmação é retornada ao usuário. Se for false, undefined é retornado, permitindo uma transição suave.

Acompanhando Mudanças em um Contexto Dinâmico

Marcar Mudanças com o Evento onchange

Para detectar alterações em campos de entrada, o evento onchange pode ser usado para definir mudançasFeitas como true se mudanças forem detectadas.

var mudançasFeitas = false;

// Engaje todos os elementos do formulário!
document.querySelectorAll('input, textarea, select').forEach(function(input) {
    input.onchange = function() {
        // Mudança registrada!
        mudançasFeitas = true;
    };
});

Proteger Contra Envio Acidental do Formulário

Ao enviar um formulário, o aviso é desativado utilizando o evento onsubmit:

// Formulário enviado, missão cumprida!
document.querySelector('form').onsubmit = function() {
    // Estamos seguros para prosseguir!
    window.onbeforeunload = null;
};

Compatibilidade com Navegadores: Modernos e Legado

Por questões de segurança, alguns navegadores modernos podem não exibir mensagens personalizadas, utilizando um diálogo padrão. Navegadores antigos suportam a exibição de mensagens pessoais através da propriedade returnValue do evento beforeunload.

jQuery como Solução Universal

A biblioteca jQuery é extremamente útil ao trabalhar com eventos beforeunload, suavizando as diferenças entre os navegadores:

$(window).bind('beforeunload', function() {
    // jQuery em ação!
    return mudançasFeitas ? "Mudanças não salvas detectadas." : undefined;
});

Visualização

Imagine o navegador como uma tenda (⛺️) e os dados do usuário representados pela analogia de carvões ardentes (🔥):

🔥 O usuário fez mudanças 
⛺️ O usuário está prestes a sair da página

O aviso serve como um balde de água (🪣) que previne o "queimado não autorizado de carvão":

window.onbeforeunload = function() {
    // Salve os dados! Confirme sua intenção de sair.
    if (dadosEstãoMudados) {
        return '🪣 Você tem certeza que deseja sair da página sem salvar as mudanças feitas?';
    }
};

Melhorias e Personalização

Gerenciamento de Notificações: Habilitando e Desabilitando

Implementar funções para gerenciar notificações lhe dará controle total:

function habilitarPrompt() {
    // Vamos ficar de olho
    window.onbeforeunload = ...; // Sua lógica aqui
}

function desabilitarPrompt() {
    // Vamos fazer uma pausa
    window.onbeforeunload = null;
};

Design UX: Do Lado do Usuário

Mensagens bem formuladas e amigáveis no diálogo de confirmação aumentam os níveis de engajamento. Embora os navegadores frequentemente utilizem diálogos padrão, é importante agir como um intermediário entre o sistema e o usuário, informando-os sobre potenciais perdas de dados.

Testando em Diferentes Navegadores

Testar a funcionalidade em vários navegadores ajuda a garantir uma experiência de usuário consistente em todas as plataformas.

Explorando a Documentação Detalhada

Familiarizar-se com os padrões HTML e a Mozilla Developer Network (MDN) fornecerá insights mais profundos sobre as características, padrões e limitações dos navegadores modernos.

Recursos Úteis

1. evento beforeunload na Web API | MDN — um guia detalhado sobre o evento beforeunload.
2. Guia do iniciante sobre cache de aplicações Web | web.dev — um recurso extenso sobre o cache de páginas da web e as capacidades de salvamento de dados.
3. javascript - Como mostrar o aviso "Você tem certeza que deseja sair desta página?" quando os dados mudam? - Stack Overflow — discussão sobre confirmação antes de sair de uma página web.
4. evento onbeforeunload — guia abrangente para lidar com eventos beforeunload em JavaScript.
5. Padrão HTML — a especificação oficial do HTML descrevendo o processo de descarregamento de documentos.
6. Eventos DOMContentLoaded, load, beforeunload, unload — esclarecimento sobre eventos relacionados ao carregamento de páginas, incluindo beforeunload.

Video

Navigation