Tratar fechamento da pagina

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! 😉