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
[javascript]
<script language="JavaScript">
window.onunload = Sair;
function Sair()
{
return "A página foi fechada";
}
</script>
[/javascript]
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
[javascript]
<script language="JavaScript">
window.onbeforeunload = ConfirmExit;
function ConfirmExit()
{
//Pode se utilizar um window.confirm aqui também…
return "Mensagem de fechamento de janela….";
}
</script>
[/javascript]
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
Igor Escobar 
Ou você pode usar o Bind:
$(window).bind(‘beforeunload’, function() { return confirm(‘Close?’); });
LikeLike
Não testei pois este metodo ainda não está documentado na jQuery mas se você ta dizendo que funciona eu acredito! ;P
LikeLike
Nem conhecia este OnBeforeUnload… bacana, qualquer hora vou fazer uns testes usando ele! 😀
LikeLike
Neguinho adora achar que jQuery é javascript… tsctsc!
MUito boa a explicação, Igor!
LikeLike
Belo post cara, eu ficava me perguntando como o Gmail fazia isso mas nunca fui atrás pra saber xD
LikeLike
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.
LikeLike
Era o que eu estava querendo te dizer.
LikeLike
Ja viu que o onbeforeunload, se estiver dentro de um iframe, não funciona no chrome?
LikeLike
Certamente. Este é um evento de janela e não de iframe rs.
LikeLike
Mas pq então que no FF e no IE funciona?
http://code.google.com/p/chromium/issues/detail?id=17157#makechanges
LikeLike
E seu eu quiser fazer algo somente quando a página for fechada e não atualizada?
LikeLike
Caros amigos,
Depois de muitas tentativas, o jeito foi tentar fazer funcionar no Internet Explorer (mesmo em 2013, continua sendo o pior browser do mundo).
Segue abaixo minha solução (em funcionamento):
1. coloque os eventos onbeforeunload na tag “body”
body onbeforeunload=”ConfirmClose()”
2. Necessariamente dentro da tag “head” insira o código abaixo:
var myclose = false;
function ConfirmClose(){
if (event.clientY < 0){
event.returnValue = 'Deseja encerrar a seção?';
setTimeout('myclose=false',10);
myclose=true;
$(function(){
//chama via post pagina para atualizar um determinado registro no banco de dados
$.post("tt_efetuar_logoff.php", function(valor){});
});
}
}
Um abraço!
LikeLike
Parabéns pelo post…
LikeLike
Fantastico
Erá o que estava precisando,
Valeu
LikeLike
onbeforeunload é executado quando clicamos no X ou no refresh da página, mostrando um popup com a mensagem e os botoes Atualizar e Sair em cada caso, mas como sei se o usuário usou refresh ( botao do browser ou f5 tanto faz) ou no sair X ?
LikeLike
@Durval não que eu conheça.
LikeLike
Gente eu estou usando esse codigo que foi postado ai em cima, para os botões funciona direitinho, porem todas vez que clico em um menu do sistema ele me pergunta se quero sair da pagina.
Tem aguma forma para isso não acontecer?
LikeLike
Vocês sabem como configurar o onbeforeunload, font da mensagem, cor, texto do popup que ele mostra?
LikeLike
Muito bom! Gostei.
LikeLike
Só tem um problema. Só funciona seu tentar fechar a página. Se estou na minha página e clico no botão de “Página Inicial” do Chrome, vai. Se clico em algum site dos meus favoritos, vai.
LikeLike