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
software engineer @ grupo abril, #javascript #nodejs #ruby #php #zce #musician #skater
Ou você pode usar o Bind:
$(window).bind(‘beforeunload’, function() { return confirm(‘Close?’); });
Nem conhecia este OnBeforeUnload… bacana, qualquer hora vou fazer uns testes usando ele!
Não testei pois este metodo ainda não está documentado na jQuery mas se você ta dizendo que funciona eu acredito! ;P
Neguinho adora achar que jQuery é javascript… tsctsc!
MUito boa a explicação, Igor!
Belo post cara, eu ficava me perguntando como o Gmail fazia isso mas nunca fui atrás pra saber xD
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.
Era o que eu estava querendo te dizer.
Ja viu que o onbeforeunload, se estiver dentro de um iframe, não funciona no chrome?
Certamente. Este é um evento de janela e não de iframe rs.
Mas pq então que no FF e no IE funciona?
http://code.google.com/p/chromium/issues/detail?id=17157#makechanges