Prevenir uma página de navegar afastado usando JavaScript

Question

Como prevenir uma página de navegar afastado usando JavaScript?

Answer 1

Usando onunload só lhe permite exibir mensagens, mas não vai interromper a navegação (porque é tarde demais). No entanto, você pode usar onbeforeunload e vai interromper a navegação:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

Editar :. confirm() removido em instrução de retorno, pois isso causou uma janela de confirmação conforme esperado, mas também mostrou uma segunda confirmação com o resultado do primeiro confirmar

Answer 2

Ao contrário de outros métodos aqui apresentados, este pedaço de código irá não fazer com que o navegador para exibir um aviso perguntando ao usuário se ele quer sair; em vez disso, ele explora a natureza evented do DOM para redirecionar de volta para a página atual (e, portanto, cancelar a navegação) antes de o navegador tem a chance de descarregá-lo da memória.

Uma vez que funciona através da navegação curto-circuito diretamente, ele não pode ser usado para impedir que a página que está sendo fechado; no entanto, ele pode ser usado para desativar rebentando-quadro.

(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);
})();

Disclaimer: Você nunca deve fazer isso. Se uma página tem o código-rebentando quadro nele, por favor, respeitar os desejos do autor.

Answer 3

acabei com esta versão ligeiramente diferente:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

Em outro lugar eu definir o sinalizador sujo para verdadeiro quando o formulário fica sujo (ou eu de outra forma quer evitar navegar fora). Isso me permite controlar facilmente se o usuário recebe a Confirmar navegação rápida.

Com o texto na resposta selecionada você vê prompts redundantes:

Answer 4

O exemplo de Na Ayman retornando false-lo a evitar a janela do navegador / guia de fechar.

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

Answer 5

O equivalente de uma forma compatível com mais moderno e navegador, usando APIs addEventListener modernos.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

Fonte: https://developer.mozilla.org/en- US / docs / web / Eventos / beforeunload

Answer 6

O equivalente a resposta aceite em jQuery 1.11:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

jsFiddle exemplo

A resposta de altCognito aproveitou o evento unload, que acontece tarde demais para JavaScript para abortar a navegação.

Answer 7

Use onunload .

Para jQuery, eu acho que isso funciona assim:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

Answer 8

Essa mensagem de erro sugeriu pode duplicar a mensagem de erro do navegador já exibe. No Chrome, as 2 mensagens de erro semelhantes são exibidos um após o outro 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 exibir a nossa mensagem de erro personalizada em tudo (mas ainda exibe o diálogo).

Uma mensagem de erro mais apropriada poderia ser:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

Ou estilo stackoverflow: "Você começou a escrever ou editar um post"

Answer 9

Se você está pegando um botão navegador back / forward e não quer navegar para fora, você 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 href="https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload" rel="nofollow noreferrer"> beforeunload evento