Javascript: OnUnload VS OnBeforeUnload

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 @hole19golf, #javascript #nodejs #ruby #java #php #scala #python

Twitter LinkedIn 

Be Sociable, Share!

Posts Relacionados:

17 thoughts on “Javascript: OnUnload VS OnBeforeUnload

  1. 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.

  2. E seu eu quiser fazer algo somente quando a página for fechada e não atualizada?

  3. 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!

  4. 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 ?

  5. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *