Impedir que uma página da Web navegue para longe usando JavaScript

Como impedir que uma página da Web navegue para longe usando JavaScript?

O uso onunloadpermite exibir mensagens, mas não interrompe a navegação (porque é tarde demais). No entanto, o uso onbeforeunloadinterromperá 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?";
}

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

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!";
});

Exemplo JSFiddle

A resposta de altCognito usou o unloadevento, 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();
});

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.