Evita que una página web se aleje utilizando JavaScript

Question

¿Cómo evitar que una página web se aleje utilizando JavaScript?

Answer 1

El uso de onunload solo le permite mostrar mensajes, pero no interrumpirá la navegación (porque es demasiado tarde). Sin embargo, puede usar onbeforeunload e interrumpirá la navegación:

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

Editar : se eliminó confirm () en la declaración de devolución ya que esto causó una ventana de confirmación como se esperaba, pero también mostró una segunda confirmación con el resultado de la primera confirmación.

Answer 2

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

Ya que funciona cortocircuitando la navegación directamente, no se puede usar para evitar que la página se cierre; sin embargo, se puede usar para deshabilitar la eliminación de cuadros.

(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 debes hacer esto. Si una página tiene un código de eliminación de marcos, respete los deseos del autor.

Answer 3

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 otra parte, establezco la bandera sucia en true cuando el formulario se ensucia (o, de lo contrario, quiero evitar la navegación). 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á indicaciones redundantes:

Answer 4

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

Answer 5

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

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

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

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

Answer 6

El equivalente a la respuesta aceptada en jQuery 1.11:

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

Ejemplo de JSFiddle

La respuesta de

altCognito utilizó el evento unload , que sucede demasiado tarde para que JavaScript pueda abortar la navegación.

Answer 7

Utilice onunload .

Para jQuery, creo que esto funciona así:

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

Answer 8

Ese mensaje de error sugerido puede duplicar el mensaje de error que ya muestra el navegador. 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 de stackoverflow: " Has comenzado a escribir o editar una publicación. "

Answer 9

Si está atrapando un botón de avance / retroceso del navegador y no quiere alejarse, 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 utilizar el evento beforeunload , pero el mensaje puede o no funcionar en todos los navegadores y requiere que se devuelva algo que obligue a una solicitud integrada.