Um objeto JavaScript para confirmar se o usuário quer sair da página
Existe algumas situações que é interessante confirmar se usuário realmente quer deixar a página atual. O usuário pode sair acidentalmente sem salvar o que está editando ou quando o fluxo de edição de conteúdo da página é complexo que pode induzir o usuário a não salvar no final.
Por exemplo, no WordPress que uso nesse blog aparece uma confirmação se eu tento sair da página de edição de post sem ter salvo antes:
Clique na imagem para ampliá-la
O segredo é configurar o evento onbeforeunload do objeto window com uma função que retorna o texto da confirmação:
<html>
<head>
<script>
window.onbeforeunload = function() {
return "Minha mensagem de confirmação.";
}
</script>
</head>
<body>
</body>
</html>
Abordagem procedural
O ideal é podermos configurar se a mensagem de confirmação irá aparecer ou não, conforme as ações do usuário na página. Vamos criar uma variável que servirá como condição se a mensagem de confirmação será exibida.
<html>
<head>
<script>
var needToConfirm = false;
window.onbeforeunload = function() {
if (needToConfirm) {
return "Minha mensagem de confirmação.";
}
}
</script>
</head>
<body>
<form onsubmit="needToConfirm = false;">
<p><input type="text" onchange="needToConfirm = true;" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>
O código acima exemplifica a ativação e a desativação da exibição da mensagem de confirmação na saída da página em um formulário. Toda a vez que o valor do campo texto for alterado (linha 15), a variável needToConfirm é configurada para true. Já na submissão do formulário (linha 14) a confirmação é desativa.
Usando orientação a objetos
Agora vamos extrair essa funcionalidade para uma objeto JavaScript, salvando o código em um arquivo .js.
function ExitPageConfirmer(message) {
this.message = message;
this.needToConfirm = false;
var myself = this;
window.onbeforeunload = function() {
if (myself.needToConfirm) {
return myself.message;
}
}
}
O objeto ExitPageConfirmer recebe como parâmetro no seu construtor a mensagem de confirmação. Por padrão, a necessidade de exibir a confirmação é configurada para false. Veja um exemplo de sua utilização:
var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");
E quando quiser ativar a exibição da mensagem de confirmação:
exitPage.needToConfirm = true;
Vamos utilizar nosso confirmador de saída de página no formulário HTML do exemplo anterior:
<html>
<head>
<script src="scripts/Prodis.ExitPageConfirmer.js"></script>
<script>
var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");
</script>
</head>
<body>
<form onsubmit="exitPage.needToConfirm = false;">
<p><input type="text" onchange="exitPage.needToConfirm = true;" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>
Na linha 3 fizemos a referência para o arquivo .js que contém o código do confirmador e criamos uma instância de ExitPageConfirmer na linha 5. Nas linhas 9 e 10 configuramos a necessidade de exibir ou não a mensagem de confirmação utilizando usando a variável exitPage.
Detalhe sobre a implementação
Há um detalhe interessante sobre a implementação do objeto ExitPageConfirmer. Vamos ver o código novamente para ficar mais fácil de visualizar.
function ExitPageConfirmer(message) {
this.message = message;
this.needToConfirm = false;
var myself = this;
window.onbeforeunload = function() {
if (myself.needToConfirm) {
return myself.message;
}
}
}
Na linha 3 é criada a variável myself que recebe o valor de this. O this nesse escopo se refere à instância do objeto. Por exemplo, quando criamos a variável exitPage no código do formulário, o this dentro do objeto se refere a essa variável.
Dentro da função que é passada para o evento onbeforeunload do objeto window existe um if verificando o valor de needToConfirm do próprio objeto ExitPageConfirmer. Isso serve de condição para exibir a mensagem confirmação.
Mas por que não usamos this.needToConfirm ao invés de myself.needToConfirm na linha 8?
Acontece que a partir do momento que estamos configurando algo dentro do objeto window, o this se refere ao objeto window e não mais ao objeto ExitPageConfirmer. Sendo assim, criamos a variável myself que recebe uma referência da instância atual do objeto ExitPageConfirmer.
Como a variável myself fica disponível também no escopo da função que é atribuída ao evento onbeforeunload do objeto window, podemos utilizá-la sem problemas.
O escopo da variável myself se limita ao construtor de ExitPageConfirmer, então a mesma não pode ser acessada de fora do objeto.
Conclusão
O objeto ExitPageConfirmer pode ser utilizado em qualquer página, evitando assim a duplicidade de código. Além disso, o uso de programação orientada a objetos em JavaScript, ao invés de abordagem procedural, torna o código mais elegante e fácil de manter.
O código completo você encontra aqui no meu Github.
Referência:
Asking Users To Confirm If They Wish To Leave The Page
Comentários