Evitar que una página web navegue usando JavaScript

¿Cómo evitar que una página web navegue usando JavaScript?

El uso le onunloadpermite mostrar mensajes, pero no interrumpirá la navegación (porque es demasiado tarde). Sin embargo, el uso onbeforeunloadinterrumpirá la navegación:

window.onbeforeunload = function() {
  return "";
}

Nota: se devuelve una cadena vacía porque los navegadores más nuevos proporcionan un mensaje como "Cualquier cambio no guardado se perderá" que no se puede anular.

En navegadores más antiguos, puede especificar el mensaje que se mostrará en la solicitud:

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

A diferencia de otros métodos presentados aquí, este bit de código no hará que el navegador muestre una advertencia preguntándole al usuario si quiere irse; en su lugar, explota la naturaleza del DOM para redirigirlo a la página actual (y así cancelar la navegación) antes de que el navegador tenga la oportunidad de descargarlo de la memoria.

Dado que funciona haciendo un cortocircuito en la navegación directamente, no se puede usar para evitar que la página se cierre; sin embargo, se puede usar para deshabilitar el frame-busting.

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

Descargo de responsabilidad: nunca debe hacer esto. Si una página tiene un código que rompe marcos, respete los deseos del autor.

Terminé con esta versión ligeramente diferente:

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

En otro lugar, configuro la bandera sucia como verdadera cuando el formulario se ensucia (o de lo contrario quiero evitar navegar). Esto me permite controlar fácilmente si el usuario recibe o no el mensaje Confirmar navegación.

Con el texto en la respuesta seleccionada, verá mensajes redundantes:

El equivalente de una manera más moderna y compatible con el navegador, utilizando las modernas API addEventListener.

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

Fuente: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

En el ejemplo de Ayman al devolver falso, evita que la ventana / pestaña del navegador se cierre.

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

El equivalente a la respuesta aceptada en jQuery 1.11:

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

JSFiddle ejemplo

La respuesta de altCognito utilizó el unloadevento, que ocurre demasiado tarde para que JavaScript anule la navegación.

Use onunload .

Para jQuery, creo que esto funciona así:

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

Ese mensaje de error sugerido puede duplicar el mensaje de error que el navegador ya muestra. En Chrome, los 2 mensajes de error similares se muestran uno tras otro en la misma ventana.

En Chrome, el texto que se muestra después del mensaje personalizado es: "¿Está seguro de que desea abandonar esta página?". En firefox, no muestra nuestro mensaje de error personalizado (pero aún muestra el cuadro de diálogo).

Un mensaje de error más apropiado podría ser:

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

O estilo stackoverflow: "Has comenzado a escribir o editar una publicación".

Si está capturando un botón de retroceso / avance del navegador y no desea navegar, puede 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
    }
});

De lo contrario, puede usar el evento beforeunload , pero el mensaje puede o no funcionar en varios navegadores, y requiere que se devuelva algo que fuerce una solicitud integrada.