Evento onbeforeunload em JavaScript, dica 26

Bem vindo a dica 26 de JavaScript da Em Busca do Código, e nesta dica nós veremos o evento onbeforeunload.

O vídeo complementa o texto e o texto completa o vídeo, assista.

Neste exemplo nós utilizaremos o evento onbeforeunload na tag body, mas você utiliza-lo em janelas.

O evento onbeforeunload pergunta se o usuário quer realmente sair de seu site. Com uma mensagem padrão para cada navegador. Essa mensagem padrão pode ser alterada, atualmente apenas no Internet Explorer / Edge. Nos outros navegadores não.

Em nosso documento HTML inicial temos um link (tag a), e utilizaremos ele para testar.

<!DOCTYPE html>
<html>
    <head>
        <title>Evento onbeforeunload. JavaScript dica 26</title>
        <script src="js26.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Evento onbeforeunload. JavaScript dica 26</h1>
        <a href="array01.html">teste</a>
</body>
</html>

Nosso JS inicial está em branco, e vamos começar pelo HTML.

Como já falei, vou declarar o evento dentro da tag body.

Algo diferente que ainda não vimos neste curso é que, entre as aspas, antes de informar a função é necessário informar um return.

onbeforeunload="return"

E agora sim informar a função que iremos criar no JS.

onbeforeunload="return naoSaia()"

Terminamos nosso HTML, agora vamos para o arquivo JS.

No JS nós vamos criar a função que acabamos de declarar no HTML.

function naoSaia() {
}

Lembrando que essa função pode ter qualquer nome. Agora nós precisamos informar o que retornar, sim, precisamos informar algo, por mais que na maioria dos navegadores, essa mensagem seja ignorada, precisamos informar algo.

function naoSaia() {
return "Você quer realmente sair?";
}

Por mais que seja simples e rápido que tenha sido essa dica, terminamos ela por aqui. Teste em seu navegador.

Se gostou dessa dica, se possível deixa seu like lá no YouTube, se compartilhar estará ajudando bastante o projeto e também estará compartilhando conhecimento. Muito obrigado por assistir e, até mais.

Código fonte JS completo.

function naoSaia() { return "Você quer realmente sair?"; }

Espero que você tenha gostado desta dica e leitura, e até mais. Observação, agora vem as fontes.

Confira outras dicas de JS do site. Já temos muito mais que o básico.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.