Cómo mostrar la "estás seguro de que deseas salir de esta página?", cuando los cambios comprometidos?

StackOverflow https://stackoverflow.com/questions/1119289

Pregunta

Aquí en stackoverflow, si usted comenzó a hacer cambios, a continuación, intenta navegar fuera de la página, un javascript botón de confirmación aparece y le pregunta:"¿Estás seguro de que deseas salir de esta página?" blee bla bloo...

Alguien ha implementado esto antes, ¿cómo puedo hacer un seguimiento de que los cambios fueron cometidos?Creo que yo podría hacer esto por mí mismo, estoy tratando de aprender las buenas prácticas de ustedes los expertos.

He intentado lo siguiente pero no funciona:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

Cualquiera puede publicar un ejemplo?

¿Fue útil?

Solución

Actualizar (2017)

Los navegadores modernos consideran ahora mostrar un mensaje personalizado a ser un peligro para la seguridad y por lo tanto ha sido eliminado de todos ellos. Navegadores ahora sólo se muestran los mensajes genéricos. Dado que ya no tienen que preocuparse acerca de la configuración del mensaje, es tan simple como: 

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

Lea a continuación para el apoyo navegador antiguo.

Actualizar (2013)

La respuesta original es adecuado para IE6-8 y FX1-3.5 (que es lo que se ha orientado hacia atrás en 2009 cuando fue escrito), pero es más bien fuera de fecha y ahora no va a funcionar en la mayoría de los navegadores actuales - I 'he dejado a continuación como referencia.

El window.onbeforeunload no es tratada constantemente por todos los navegadores. Debe ser una referencia de función y no una cadena (como la respuesta original indique lo contrario), sino que funcionará en navegadores antiguos, porque el cheque para la mayoría de ellos parece ser si nada se asigna a onbeforeunload (incluyendo una función que devuelve null).

window.onbeforeunload establecer una referencia a la función, pero en los navegadores antiguos que tenga que establecer la returnValue del evento en lugar de devolver una cadena: 

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

No se puede tener que confirmOnPageExit hacer el cheque y volver nula si desea que el usuario continúe sin el mensaje. Todavía es necesario para eliminar el evento a su vez de forma fiable la activación y desactivación: 

// 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)

Para encenderlo: 

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

Para desactivarlo: 

window.onbeforeunload = null;

Tenga en cuenta que esto no es un evento normal -. No se puede obligar a la misma en la forma estándar

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

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

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

Otros consejos

El onbeforeunload Microsoft-ismo es lo más cercano que tenemos a una solución estándar, pero tenga en cuenta que el apoyo del navegador es desigual; p.ej. para Opera que sólo funciona en la versión 12 y después (todavía en fase beta a partir de este escrito).

Además, para compatibilidad máxima , que tiene que hacer más que simplemente devuelva una cadena, como se explica en la red de desarrolladores de Mozilla .

Ejemplo: Definir las siguientes dos funciones para activar / desactivar el símbolo de navegación (cf. el ejemplo MDN): 

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

A continuación, defina una forma como esta: 

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

De esta manera, el usuario sólo será advertido acerca de cómo navegar de inmediato si ha cambiado el área de texto, y no se le preguntará cuando en realidad enviar el formulario.

Para que esto funcione en Chrome y Safari, que tendría que hacerlo de esta manera 

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

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

con jQuery este material es bastante fácil de hacer. Ya que se puede unir a los conjuntos.

no es suficiente para hacer el onbeforeunload, sólo desea activar el navegar de inmediato si alguien empezó a editar cosas.

jquerys 'beforeunload' funcionó muy bien para mí 

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

Esta es una manera fácil de presentar el mensaje si los datos de entrada en el formulario, y no para mostrar el mensaje si el formulario es enviado:

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

para la gente nueva que está buscando una solución sencilla, sólo tratar Areyousure.js

Para ampliar de Keith respuesta ya increíble :

mensajes de aviso personalizado

Para permitir mensajes de aviso personalizado, se puede envolver en una función como esta: 

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

A continuación, sólo llamar a esa función con su mensaje personalizado: 

preventNavigation("Baby, please don't go!!!");

Activación de navegación de nuevo

Para volver a habilitar la navegación, todo lo que necesita hacer es configurar window.onbeforeunload a null. Aquí está, envuelto en una función poco aseado que se puede llamar en cualquier lugar: 

function enableNavigation() {
    window.onbeforeunload = null;
}

Uso de jQuery para enlazar este para formar elementos

Si se utiliza jQuery, esto puede fácilmente ser obligado a todos los elementos de una forma como esta: 

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

A continuación, para permitir que la forma que se presentará: 

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

formas dinámicamente modificados:

preventNavigation() y enableNavigation() se pueden unir a cualquier otra función que sea necesario, como la modificación dinámicamente un formulario, o hacer clic en un botón que envía una solicitud de AJAX. Hice esto mediante la adición de un elemento de entrada oculta a la forma: 

<input id="dummy_input" type="hidden" />

A continuación, cada vez que quiero a evitar que el usuario navega fuera, que desencadenan el cambio en esa entrada para asegurarse de que es ejecutado preventNavigation(): 

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

A continuación, intente esto funciona 100% 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

Cuando el usuario comienza a hacer cambios en la forma, se establece un indicador booleano. Si el usuario intenta navegar fuera de la página, se comprueba que la bandera en el window.onunload evento. Si el indicador está activado, se mostrará el mensaje devolviendo como una cadena. Devolver el mensaje como una cadena emergerá un diálogo de confirmación que contiene su mensaje.

Si está usando ajax para confirmar los cambios, se puede establecer el indicador de false después de los cambios se han comprometido (es decir, en caso de éxito Ajax).

El norma establece que provocó puede ser controlado por la cancelación de la href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload" rel="nofollow noreferrer"> beforeunload caso o establecer el retorno valor a un no nulo valor . También se establece que los autores deberían usar event.preventDefault () en lugar de returnValue, y el mensaje se muestra al usuario no es personalizable .

A partir de 69.0.3497.92, Chrome no ha cumplido con el estándar. Sin embargo, hay una informe de error presentada, y una < a href = "https://chromium-review.googlesource.com/c/chromium/src/+/1154225" rel = "nofollow noreferrer"> revisión está en curso. Chrome requiere returnValue para ser fijada en relación con el objeto de evento, no el valor devuelto por el controlador.

Es responsabilidad del autor para realizar un seguimiento de si se han realizado cambios; se puede hacer con una variable o garantizando el evento sólo se maneja cuando sea necesario. 

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

Puede añadir un evento onchange en el área de texto (o cualquier otro campo) que establece una variable en JS. Cuando el usuario intenta cerrar la página (window.onunload) que comprueba el valor de esa variable y mostrar la alerta en consecuencia.

Sobre la base de todas las respuestas sobre este tema, escribí el siguiente código y funcionó para mí.

Si usted tiene sólo algunas etiquetas de entrada / área de texto que requiere un evento onunload comprobación, puede asignar HTML5 ficha atributos como data-onunload="true"

para, por ejemplo. 

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

y el Javascript (jQuery) puede tener este aspecto: 

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

Esta es mi html 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

Y así, esta es la forma en que hice algo similar en JavaScript 

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

Se puede hacer fácilmente mediante el establecimiento de una ChangeFlag en true, en onChange caso de TextArea . Usar javascript para mostrar confirmar cuadro de diálogo basado en el ChangeFlag valor. Descartar la forma y navegar a la página solicitada si confirmar devuelve verdadero, de lo contrario no hacer nada .

Lo que se quiere utilizar es el caso onunload en JavaScript.

Aquí está un ejemplo: http://www.w3schools.com/jsref/event_onunload. asp

Hay un parámetro "onunload" para el cuerpo de la etiqueta puede llamar a funciones javascript desde allí. Si devuelve falso que impide navegar fuera.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top