Fala galera beleza? 😀
Hoje vou mostrar para vocês dois métodos para tratar quando o usuário for atualizar ou fechar a pagina, e algo estiver em processamento, ou que você queira exibir uma mensagem de confirmação para usuário confirmando a saída da pagina e etc …
Em JavaScript temos dois eventos para isso o OnUnload ou o OnBeforeUnload
Mas Filipe qual a diferença entre os dois e quando devo usar cada um?
O evento OnUnload: podemos utilizar esse evento quando queremos executar uma função quando o usuário sair/atualizar a pagina, um exemplo de utilização seria para computar qual foi a duração que o usuário permaneceu na pagina, ou seja assim que ele sair disparamos o evento onunload que executaria nossa função para realizar essa tarefa
Exemplo
window.onunload = Sair; function Sair() { // Bloco de código a ser executado assim que a pagina for fechada. console.log("A Pagina foi fechada!"); }
Já o evento OnBeforeUnload é um pouco diferente do OnUnload, a diferença está que o OnBeforeUnload executa ANTES da pagina ser fechada, nesse wordpress caso podemos usar como exemplo, um alerta perguntando para o usuário se ele deseja realmente atualizar/sair da pagina. isso pode nos ser útil quando temos algum processo em andamento ou quando o usuário tem dados na pagina que não foi salvo. um exemplo na prática desse metodo é o Facebook, experimentem vá à página do facebook, escrevam qualquer coisa na atualização de status e não cliquem em publicar e tente sair ou atualizar a pagina, você com certeza receberá um alert de confirmação.
Exemplo
<form action="">Status <textarea>Digite qualquer texto...</textarea> <input type="submit" value="Enviar" /></form>
window.onbeforeunload = Sair; function Sair() { return "Você tem dados que não foram salvos aindas."; } function liberarSaidaDaPagina() { window.onbeforeunload = null; }
Nesse exemplo acima simulamos oque o facebook faz (claro de uma maneira bem simples) para demostrar a funcionalidade da função.
Bom é isso pessoal, espero que tenho ajudado vocês, qualquer dúvida postem que o mais breve possível responderei.
Abraço a todos! 😉