Respostas:
O uso onunload
permite exibir mensagens, mas não interrompe a navegação (porque é tarde demais). No entanto, o uso onbeforeunload
interromperá a navegação:
window.onbeforeunload = function() {
return "";
}
Nota: Uma cadeia vazia é retornada porque os navegadores mais recentes fornecem uma mensagem como "Quaisquer alterações não salvas serão perdidas" que não podem ser substituídas.
Em navegadores mais antigos, você pode especificar a mensagem a ser exibida no prompt:
window.onbeforeunload = function() {
return "Are you sure you want to navigate away?";
}
window.onbeforeunload = function() { return ""; }
Ao contrário de outros métodos apresentados aqui, esse trecho de código não fará com que o navegador exiba um aviso perguntando ao usuário se ele deseja sair; em vez disso, explora a natureza do evento do DOM para redirecionar de volta à página atual (e, assim, cancelar a navegação) antes que o navegador possa descarregá-lo da memória.
Como ele funciona com um curto-circuito direto na navegação, não pode ser usado para impedir que a página seja fechada; no entanto, ele pode ser usado para desativar o bloqueio de quadros.
(function () {
var location = window.document.location;
var preventNavigation = function () {
var originalHashValue = location.hash;
window.setTimeout(function () {
location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
location.hash = originalHashValue;
}, 0);
};
window.addEventListener('beforeunload', preventNavigation, false);
window.addEventListener('unload', preventNavigation, false);
})();
Isenção de responsabilidade: você nunca deve fazer isso. Se uma página tiver um código de quebra de quadros, respeite os desejos do autor.
Acabei com esta versão um pouco diferente:
var dirty = false;
window.onbeforeunload = function() {
return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}
Em outros lugares, defino o sinalizador sujo como verdadeiro quando o formulário fica sujo (ou, caso contrário, desejo impedir a navegação). Isso me permite controlar facilmente se o usuário recebe ou não o prompt Confirmar Navegação.
Com o texto na resposta selecionada, você verá avisos redundantes:
O equivalente de uma maneira mais moderna e compatível com o navegador, usando as modernas APIs addEventListener.
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '';
});
Fonte: https://developer.mozilla.org/pt-BR/docs/Web/Events/beforeunload
event.returnValue
No exemplo de Ayman, retornando false, você impede que a janela / guia do navegador se feche.
window.onunload = function () {
alert('You are trying to leave.');
return false;
}
O equivalente à resposta aceita no jQuery 1.11:
$(window).on("beforeunload", function () {
return "Please don't leave me!";
});
A resposta de altCognito usou o unload
evento, que acontece muito tarde para o JavaScript abortar a navegação.
Use onunload .
Para jQuery, acho que funciona assim:
$(window).unload(function() {
alert("Unloading");
return falseIfYouWantToButBeCareful();
});
unload
incêndios de evento quando o usuário é sair da página, ao contrário do beforeunload
que dispara apenas de antemão (e pode ser cancelada)
Essa mensagem de erro sugerida pode duplicar a mensagem de erro que o navegador já exibe. No chrome, as duas mensagens de erro semelhantes são exibidas uma após a outra na mesma janela.
No chrome, o texto exibido após a mensagem personalizada é: "Tem certeza de que deseja sair desta página?". No firefox, ele não exibe nossa mensagem de erro personalizada (mas ainda exibe a caixa de diálogo).
Uma mensagem de erro mais apropriada pode ser:
window.onbeforeunload = function() {
return "If you leave this page, you will lose any unsaved changes.";
}
Ou no estilo stackoverflow: "Você começou a escrever ou editar uma postagem."
Se você estiver pegando o botão voltar / avançar do navegador e não quiser sair, pode usar:
window.addEventListener('popstate', function() {
if (window.location.origin !== 'http://example.com') {
// Do something if not your domain
} else if (window.location.href === 'http://example.com/sign-in/step-1') {
window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
} else if (window.location.href === 'http://example.com/sign-in/step-2') {
window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
} else {
// Let it do its thing
}
});
Caso contrário, você pode usar o evento beforeunload , mas a mensagem pode ou não funcionar em vários navegadores e requer a devolução de algo que força um prompt interno.