Saltar al contenido

Cómo mostrar el mensaje “¿Está seguro de que desea salir de esta página?” cuando cambios comprometidos?

Después de observar en varios repositorios y páginas webs al final hemos descubierto la resolución que te enseñamos ahora.

Solución:

Actualización (2017)

Los navegadores modernos ahora consideran que mostrar un mensaje personalizado es un peligro para la seguridad y, por lo tanto, se ha eliminado de todos ellos. Los navegadores ahora solo muestran mensajes genéricos. Como ya no tenemos que preocuparnos por configurar el mensaje, es tan simple como:

// Enable navigation prompt
window.onbeforeunload = function() 
    return true;
;
// Remove navigation prompt
window.onbeforeunload = null;

Lea a continuación para conocer la compatibilidad con navegadores heredados.

Actualización (2013)

La respuesta original es adecuada para IE6-8 y FX1-3.5 (que es a lo que nos dirigíamos en 2009 cuando se escribió), pero ahora está bastante desactualizada y no funcionará en la mayoría de los navegadores actuales. a continuación como referencia.

El window.onbeforeunload no todos los navegadores tratan de forma coherente. Debe ser una referencia de función y no una string (como decía la respuesta original) pero eso funcionará en navegadores más antiguos porque la verificación para la mayoría de ellos parece ser si hay algo asignado a onbeforeunload (incluida una función que devuelve null).

Configura window.onbeforeunload a una referencia de función, pero en los navegadores más antiguos debe configurar el returnValue del evento en lugar de simplemente devolver un string:

var confirmOnPageExit = function (e) 
;

no puedes tener eso confirmOnPageExit hacer el cheque y devolver null si desea que el usuario continúe sin el mensaje. Aún debe eliminar el evento para activarlo y desactivarlo de manera confiable:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

Respuesta original (trabajó en 2009)

Encenderlo:

window.onbeforeunload = "Are you sure you want to leave?";

Para apagarlo:

window.onbeforeunload = null;

Tenga en cuenta que este no es un evento normal, no puede vincularlo de la manera estándar.

Para comprobar los valores? Eso depende de su marco de validación.

En jQuery esto podría ser algo como (ejemplo muy básico):

$('input').change(function() 
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
);

El onbeforeunload Microsoft-ism es lo más parecido que tenemos a una solución estándar, pero tenga en cuenta que el soporte del navegador es desigual; por ejemplo, para Opera solo funciona en la versión 12 y posteriores (todavía en versión beta al momento de escribir este artículo).

También por máxima compatibilidad, debe hacer más que simplemente devolver un string, como se explica en Mozilla Developer Network.

Ejemplo: Defina las siguientes dos funciones para habilitar/deshabilitar el indicador de navegación (cf. el ejemplo de MDN):

function enableBeforeUnload() 
    window.onbeforeunload = function (e) 
        return "Discard changes?";
    ;

function disableBeforeUnload() 
    window.onbeforeunload = null;

A continuación, defina un formulario como este:

De esta manera, el usuario solo recibirá una advertencia sobre la navegación si ha cambiado el área de texto y no se le preguntará cuando esté enviando el formulario.

Para que esto funcione en Chrome y Safari, tendrías que hacerlo así

window.onbeforeunload = function(e) 
    return "Sure you want to leave?";
;

Referencia: https://developer.mozilla.org/en/DOM/window.onbeforeunload

Aquí tienes las reseñas y valoraciones

Si estás contento con lo expuesto, eres capaz de dejar un ensayo acerca de qué te ha parecido esta crónica.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *