Confirmar alterações antes de sair da página

Em muitos casos, é bom confirmar se usuário realmente quer sair da página, isso porque dependo do site ou sistema Web, a página apresenta muitas informações para alterar, e antes do usuário salvar as alterações feitas ele ficou muito tempo mexendo na tela, sabendo disso, o usuário ficaria muito frustrado caso ele clicasse em um link para outra página ou apertasse sem querer uma combinação de teclas que fechasse a página, ou até mesmo, clicou sem querer no ícone de fechar o navegador.

Nesse artigo demonstrarei de forma simples como evitar isso, bastando apenas adicionar um simples script JavaScript para confirmar alterações antes de sair da página.

Evento onbeforeunload do JavaScript

Para confirmar se o usuário realmente quer sair da página sem perder as alterações feitas, vamos utilizar o evento onbeforeunload, esse evento é executado antes do documento (aba ou navegador) ser descarregado (vulgo fechado). Ao contrário do evento onunload que executa em paralelo ao fechamento da página, o onbeforeunload executa antes do fechamento, permitindo exibir um alerta para o usuário caso ele tenha fechado indesejavelmente.

Exemplo de uso

Você pode usar o evento onbeforeunload de duas maneiras, atribuindo direto no objeto window:

window.onbeforeunload = function(event) {
    event.returnValue = "Mensagem de aviso";
};

Ou adicionando um ouvinte para o evento. Essa segunda forma é mais recomendada, pois garante que somente existirá uma execução do evento onbeforeunload no objeto window.

window.addEventListener("beforeunload", function(event) {
    event.returnValue = "Mensagem de aviso";
});

Observação: Quando utilizado addEventListener deve-se utilizar o evento onbeforeunload escrito como beforeunload.

Garantindo compatibilidade com o maior número de navegadores

Nem todos os navegadores executam o evento da mesma forma. O evento só vai mostrar o alerta caso seja retornado um valor, por isso utilizamos o trecho de código event.returnValue = "Mensagem de aviso";, mas alguns navegadores esperam que seja retornado uma mensagem com o trecho de código return "Mensagem de aviso";. Também é recomendado utilizar o trecho de código event.preventDefault();.

Então a melhor forma para garantir uma melhor compatibilidade com o maior número de navegadores possíveis, o código final ficaria parecido com o seguinte:

window.addEventListener("beforeunload", function(event) { 
    event.preventDefault();


    event.returnValue = "Mensagem de aviso"; 
    return "Mensagem de aviso";
});

Alguns pontos a ressaltar

Existem muitas pessoas de má fé no mundo, imagina se alguém colocasse um script que proibisse o usuário de fechar a página? Utilizando funções que trancam a página, como alert, confirm, ou outras, seria muito ruim não é mesmo? Para evitar isso as funções window.alert(), window.confirm() e window.prompt() serão ignoradas pelos navegadores, nenhuma função de travamento será executada no evento onbeforeunload.

Outra coisa a se mencionar, é que nem todos os navegadores exibem a mensagem que você escreveu como retorno, a maioria vai ignorar a mensagem e mostrar uma mensagem padrão do navegador, sendo impossível alterar a mensagem e o layout do alerta.

Último ponto a ressaltar, em muitos navegadores quando você entra na página e não faz nenhuma interação, interações como clicks por exemplo, o navegador entende que o usuário não fez nada, então ele NÃO vai exibir o alerta perguntando se o usuário realmente quer sair da página. Faça um teste, entre na página e apenas feche, talvez não será mostrado o alerta, agora entre novamente e click em qualquer lugar, pode ser em um espaço em branco mesmo, com isso, na hora de fechar o navegador mostrará o alerta, perguntando se realmente o usuário deseja sair da página.

Referências