Fico pensando em um caso mais familiar possível para ilustrar a utilidade das duas funções, e a melhor que me vem à cabeça é o Gmail. Já pensou em fazer algo parecido com o Gmail? Quando o usuário fechar a janela e alguma requisição estiver em processamento, ele dá um aviso sobre ela, para evitar que você perca alguma alteração.
Muita gente pensa que o evento utilizado para fazer tal proeza é o evento “onunload” mas não é. Existe uma pequena diferença entre os dois eventos.
O evento OnUnload
O evento OnUnload em sua tradução quer dizer: “quando descarregar”. Ele é responsável por executar uma instrução quando a página for fechada, mas CUIDADO!. A utilização deste evento não é muito confiável quando se trata de navegadores como Internet Explorer e AJAX ao mesmo tempo. Quando o IE está de mal humor e simplesmente ignora o evento, não executando a instrução que você programou para ele fazer. Se a instrução envolver AJAX, ela está ainda mais fadada ao fracasso e o seu usuário provavelmente vai ficar muito triste.
Exemplo
<script language="JavaScript">
window.onunload = Sair;
function Sair()
{
return "A página foi fechada";
}
</script>
O evento OnBeforeUnload
Traduzindo OnBeforeUnload para o português, quer dizer: Antes de descarregar. O evento OnBeforeUnload funciona um pouco diferente do OnUnload. O evento OnBeforeUnload é chamado ANTES da janela ser fechada. É mais eficiente, pois ele não é executado em concorrência (junto/ao mesmo tempo) com o fechamento da janela, o que pode fazer com que algo seja carregado pela metade (de forma interminada).
Exemplo
<script language="JavaScript">
window.onbeforeunload = ConfirmExit;
function ConfirmExit()
{
//Pode se utilizar um window.confirm aqui também...
return "Mensagem de fechamento de janela....";
}
</script>
Pesquisando sobre este evento eu notei que o jQuery não da suporte ao eventoOnBeforeUnload. Se alguém descobrir por que, ganha um doce. x)
[]‘s
Rafael Hengles says:
Ou você pode usar o Bind:
$(window).bind(‘beforeunload’, function() { return confirm(‘Close?’); });
14th June 2010 at 14:11
Guilherme Serrano says:
Nem conhecia este OnBeforeUnload… bacana, qualquer hora vou fazer uns testes usando ele!
14th June 2010 at 17:33
Igor Escobar says:
Não testei pois este metodo ainda não está documentado na jQuery mas se você ta dizendo que funciona eu acredito! ;P
14th June 2010 at 9:29
Chris Benseler says:
Neguinho adora achar que jQuery é javascript… tsctsc!
MUito boa a explicação, Igor!
14th June 2010 at 9:18
Cayo Medeiros aka. yogodoshi says:
Belo post cara, eu ficava me perguntando como o Gmail fazia isso mas nunca fui atrás pra saber xD
14th June 2010 at 16:06
Igor Escobar says:
Acho que você está enganado Deyvid. O gmail funciona “exatamente” desta forma. Se você acaba de enviar um e-mail e a pagina ainda estiver processando ele vai dar o mesmo aviso utilizando este mesmo evento. Pode observar. Uma tela de confirmação vai aparecer para que você confirme a “saída” da pagina e não exclusivamente o fechamento dela.
14th June 2010 at 10:29
Igor Escobar says:
Era o que eu estava querendo te dizer.
14th June 2010 at 10:38