Executando código no fechamento da janela do navegador ou na atualização da página

Frequentemente, é desejável executar ações específicas quando um usuário fecha uma janela do navegador ou atualiza uma página da web. Felizmente, existem dois manipuladores de eventos disponíveis para atender a essa necessidade: window.onbeforeunload e window.onunload.

window.onbeforeunload

O evento onbeforeunload é acionado quando um usuário tenta sair de uma página. Normalmente, é usado para exibir uma caixa de confirmação solicitando ao usuário que confirme sua escolha ou evite que ele saia da página caso tenha dados não salvos. No entanto, ao não retornar uma string ou definir event.returnValue, você pode evitar que o navegador mostre uma mensagem e execute seu código silenciosamente.

window.onunload

O O evento onunload é acionado quando uma página é descarregada do navegador. É comumente usado para executar tarefas de limpeza, como remover quaisquer ouvintes de eventos remanescentes ou fechar conexões de banco de dados.

Implementação

Tanto onbeforeunload quanto onunload podem ser atribuídos às propriedades da janela ou usando o método .addEventListener. Aqui está um exemplo:

// window property
window.onbeforeunload = function() {
  // Do something
};

// .addEventListener
window.addEventListener("beforeunload", function(e) {
  // Do something
});

Nota:

No caso de iframes, os eventos onbeforeunload não são acionados quando o iframe é excluído por seu pai, mas os eventos unload e pagehide sim. No entanto, o Firefox atualmente possui um bug que impede que esses eventos sejam disparados em casos de exclusão de iframe, impossibilitando a execução do código imediatamente antes de um iframe ser removido no Firefox.