Evento JavaScript antes do descarregamento

Resumo : neste tutorial, você aprenderá sobre o beforeunloadevento JavaScript que permite exibir uma caixa de diálogo de confirmação antes de sair de uma página da web.

`beforeunload`Evento de introdução ao JavaScript

Antes que a página da web e seus recursos sejam descarregados, o beforeunloadevento é acionado. Neste momento, a página ainda está visível e você tem a oportunidade de cancelar o evento.

Para se inscrever no beforeunloadevento, você usa o window.addEventListener()método:

window.addEventListener('beforeunload',(event) =>{
    // do something here
});Linguagem de código:  JavaScript  ( javascript )

Como the windowé o objeto global, você pode omiti-lo assim:

addEventListener('beforeunload',(event) =>{
    // do something here
});Linguagem de código:  PHP  ( php )

Se uma página da Web tiver um beforeunloadouvinte de evento e você estiver prestes a sair da página, o beforeunloadevento acionará uma caixa de diálogo de confirmação para confirmar se você realmente deseja sair da página.

Se você confirmar, o navegador o direcionará para a nova página. Caso contrário, cancela a navegação.

De acordo com a especificação, você precisa chamar o preventDefault()método dentro do beforeunloadmanipulador de eventos para mostrar a caixa de diálogo de confirmação. No entanto, nem todos os navegadores implementam isto:

addEventListener('beforeunload',(event) => {
    event.preventDefault();
});Linguagem de código:  PHP  ( php )

Historicamente, alguns navegadores permitem exibir uma mensagem personalizada na caixa de diálogo de confirmação. O objetivo era informar aos usuários que eles perderiam dados se saíssem do site. Infelizmente, esse recurso é frequentemente usado para enganar os usuários. Como resultado, uma mensagem personalizada não é mais suportada.

Com base na especificação HTML, as chamadas para alert(), confirm()e prompt()são ignoradas no beforeunloadmanipulador de eventos.

`beforeunload`Exemplo de evento JavaScript

O exemplo a seguir anexa um manipulador de eventos ao beforeunloadevento. Se você clicar no link para navegar para outra página, o navegador mostrará uma caixa de diálogo de confirmação.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS beforeunload Event</title>
</head>

<body>
    <a href="https://tutorials.acervolima.com/tutorial-de-javascript">JavaScript Tutorial</a>
    <script>
        window.addEventListener('beforeunload', (event) => {
            event.preventDefault();
            // Google Chrome requires returnValue to be set.
            event.returnValue = '';
        });
    </script>
</body>

</html>Linguagem de código:  HTML, XML  ( xml )

Resumo

O beforeunloadevento é acionado antes que a página da Web e seus recursos estejam prestes a ser descarregados.
Use beforeunloadpara confirmar se os usuários realmente desejam sair da página para evitar perda de dados.