0

Me baseando nessa resposta eu gostaria de que quando o usuario fechasse a aba(ou atualizasse) recebesse um alert dizendo Tchau, porem apenas quando eu entro na pagina ele me diz Olá, quando atualizo ou fecho a aba, ele não me diz Tchau.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
</html>

<script type="text/javascript">
    window.onload = function(){alert('Olá')};
    window.onbeforeunload = function(){alert('Tchau')};
    window.onunload = function(){alert('Tchau')};
</script>

Lembrando que também já tentei dessa forma

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
</html>

<script type="text/javascript">
    window.onload = function(){alert('Olá')}
    window.onbeforeunload = function(){return 'Tchau';}
    window.onunload = function(){return 'Tchau';}
</script>

2 Respostas 2

4

Respondi a uma questão parecida aqui.

Mas para o método window.onbeforeunload funcionar, é preciso colocar um return:

window.onbeforeunload = function(){
  return 'Tchau';
}

No entanto, alguns navegadores não exibem a mensagem do return, mas apenas uma caixa de confirmação própria (se não me engano, o Chrome, Firefox e Opera).

Edit

O método onunload é executado após a janela ser fechada. Portanto não exibirá nada. Já o onbeforeunload faz algo antes de fechar.

Veja documentação no MDN.

Edit 2

O método window.onbeforeunload só irá funcionar também se houver alguma interação na página. Caso o usuário abra a página e a feche sem ter feito nenhuma interação, não haverá confirmação.

Edit 3

Em vez de fazer um window.onload, você pode criar um modal de boas-vindas e forçar o usuário a clicar, nisso gerando uma interação. Veja o código (teste online neste link):

#tela {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
}

#aviso{
   width: 300px;
   padding: 20px;
   background-color: #fff;
   border-radius: 10px;
   z-index: 999;
   top: 50%;
   align-self: center;
   text-align: center;
}
<div id="tela">
   <div id="aviso">
      Olá!
      <br /><br />
      <input type="button" value="OK" onclick="document.querySelector('#tela').style.display = 'none';" />
   </div>
</div>

19
  • Acabei de editar a pergunta, eu já tentei dessa forma e também não consegui. 28/12/2017 às 0:57
  • E há alguma forma de testar se está funcionando no google chrome ?? 28/12/2017 às 0:59
  • @LucasCarezia funciona perfeitamente. Veja uma página de teste neste link. Tente sair clicando no link, recarregar a página ou fechar a aba.
    – Sam
    28/12/2017 às 1:07
  • Você tinha comentado um outro método, porem apagou o comentário, poderia coloca-lo novamente ?? 28/12/2017 às 1:45
  • @LucasCarezia onde?
    – Sam
    28/12/2017 às 1:46
2

Já falei disto algumas vezes:

Pra resumir as respostas, onunload e onbeforeunload não servem para detectar quando a pessoa deixa o site, o que ele faz é detectar o descarregamento, ou seja se navegar em um link do mesmo site vai disparar o evento, se apertar F5, vai disparar o evento, se usar o Back ou Forward vai disparar o evento.

Ainda sim se quiser usar, é necessário primeiro entender algumas coisas, quando o unload ou beforeunload ocorrem a página já esta em pré-processo de destruir/descarregar e portanto não vão ser geradas novas janelas/GUIs.

Ou seja, alert(), confirm(), prompt() e window.open() não serão executados, mesmo que você deseje, isto é explicado na especificação da W3C https://www.w3.org/TR/html5/webappapis.html#user-prompts

nota: alert/confirm e outros também são ignorados no evento pagehide

Então o único evento que você deve usar é o beforeunload com o return '<string>';, tem mais um problema o seu HTML esta mal marcado, não é que isto afete a execução, mas ainda sim deveria ser isto:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script>
            //script vai aqui
        </script>
    </body>
</html>

No entanto note que mesmo usando:

window.onbeforeunload = function(){
    return 'Tchau';
};

Não vai emitir o texto desejado, ele vai apenas gerar uma mensagem padrão perguntando se quer ou não descarregar a página:

janela de confirmação de saida com o evento beforeunload

Ou seja isso não é uma mensagem apenas de "adeus", e nem é exibido o Tchau, é um recurso para ser usado em certas ocasiões, para dizer tchau com certeza não é uma boa maneira de implementar isto.

Proporcionando uma boa experiência para o usuário

Dizer oi, dizer tchau, será que isto é realmente necessário? Será que o usuário não sabe que já esta de saida ou quando entrou na página?

Eu pessoalmente creio que estes tipos de mensagem soam mais como ruido do que como algo útil ao usuário, tanto que por muitos destes problemas é que certas implementações foram removidas dos navegadores, muitas coisas mais causam aquela sensação "a não, de novo essa mensagem", do que realmente parecer educado, o usuário vai se sentir bem vindo no site quando ele conseguir o que deseja do site, e não com uma mensagem de boas vindas perturbadora que trava tudo até que seja apertado no botão ok.

Sobre o uso de beforeunload e unload já expliquei, eles não são para checar quando a pessoa sai do site, e não existe maneira garantida de fazer isto, dá pra implementar qualquer coisa, detectar links internos e externos, mas este tipo de coisa é trabalho desnecessário, recomendo pessoalmente que se foque em criar uma interface agradável de navegar para que o usuário se sinta bem ao navegar, então ai sim ele vai se sentir bem vindo e quando sair do site com certeza ele uma hora irá querer voltar.

Qual seria a utilidade do beforeunload?

Ele seria mais interessante se usado para impedir que perca edições feitas, ou se for um jogo impedir que saia sem salvar o jogo, pois é exatamente isto que a mensagem padrão diz:

Deseja sair deste site?

É possível que alterações feitas não tenham sido salvas

Esse é o foco dele atualmente, impedir de que o usuário feche algo acidentalmente e perca algo.

2
  • 1
    Sua resposta foi ótima, meu intuito com o Olá e Tchau era apenas de testes, para ver como funcionava os métodos, mas sua resposta foi excepcional, obrigado. 28/12/2017 às 4:11
  • @LucasCarezia aproveite e leia os links, quando puder claro, sobre tipo checar se o usuário ainda esta online ou não, usando um temporizador
    – Syzoth
    28/12/2017 às 4:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .