javascript - examples - Cómo mostrar el mensaje "¿Está seguro de que desea navegar fuera de esta página?" Cuando se realizan los cambios?
onbeforeunload javascript examples (17)
Aquí, en stackoverflow, si empezaste a hacer cambios, entonces intentas navegar fuera de la página, aparece un botón de confirmación de javascript y pregunta: "¿Estás seguro de que quieres navegar fuera de esta página? blee blah bloo ...
¿Alguien ha implementado esto antes? ¿Cómo hago un seguimiento de los cambios realizados? Creo que podría hacerlo yo mismo, estoy tratando de aprender las buenas prácticas de usted, los expertos.
Intenté lo siguiente pero todavía 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>
¿Alguien puede publicar un ejemplo?
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 removed 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 soporte de navegador heredado.
Actualización (2013)
La respuesta original es adecuada para IE6-8 y FX1-3.5 (que es lo que buscábamos en 2009 cuando se escribió), pero ahora está bastante desactualizada y no funcionará en la mayoría de los navegadores actuales. abajo para referencia.
El window.onbeforeunload no es tratado de manera consistente por todos los navegadores. Debería ser una referencia de función y no una cadena (como se indicó en la respuesta original), pero eso funcionará en navegadores más antiguos porque la comprobación para la mayoría de ellos parece ser si hay algo asignado para onbeforeunload de onbeforeunload (incluida una función que devuelve null ).
Establece window.onbeforeunload a una referencia de función, pero en los navegadores más antiguos debe establecer el valor de 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 puede hacer que confirmOnPageExit realice la comprobación y devuelva nulo si desea que el usuario continúe sin el mensaje. Aún necesita 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 (trabajada en 2009)
Encenderlo:
window.onbeforeunload = "Are you sure you want to leave?";
Para apagarlo:
window.onbeforeunload = null;
Tenga en cuenta que esto no es un evento normal, no puede vincularlo de manera estándar.
Para comprobar los 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?";
});
Aqui prueba esto funciona al 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>
Basado en todas las respuestas en este hilo, escribí el siguiente código y funcionó para mí.
Si solo tiene algunas etiquetas input / textarea que requieren que se verifique un evento onunload, puede asignar atributos de datos HTML5 como data-onunload="true"
por ej.
<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>
y el Javascript (jQuery) puede verse así:
$(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?";
};
});
Cuando el usuario comienza a realizar cambios en el formulario, se establecerá una bandera booleana. Si el usuario intenta alejarse de la página, verifica esa bandera en el evento window.onunload . Si se establece el indicador, muestra el mensaje devolviéndolo como una cadena. Al devolver el mensaje como una cadena, aparecerá un cuadro de diálogo de confirmación que contiene su mensaje.
Si está utilizando ajax para confirmar los cambios, puede establecer el indicador en false vez que se hayan confirmado los cambios (es decir, en el evento de éxito ajax).
El estado estándar indica que se puede controlar la beforeunload cancelando el evento de beforeunload o estableciendo el valor de retorno en un valor no nulo . También establece que los autores deben usar Event.preventDefault () en lugar de returnValue, y el mensaje que se muestra al usuario no es personalizable .
A partir del 69.0.3497.92, Chrome no ha cumplido con el estándar. Sin embargo, se ha archivado un informe de error y se está realizando una review . Chrome requiere que el valor de retorno se establezca por referencia al objeto de evento, no al valor devuelto por el controlador.
Es responsabilidad del autor hacer un seguimiento de si se han realizado cambios; Se puede hacer con una variable o asegurando que el evento solo se maneje 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'';
El Microsoft-ism de onbeforeunload la onbeforeunload 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 (aún en versión beta a partir de este escrito).
Además, para una máxima compatibilidad , necesita hacer más que simplemente devolver una cadena, como se explica en la Red de desarrolladores de Mozilla .
Ejemplo: defina las dos funciones siguientes para habilitar / deshabilitar el indicador de navegación (consulte el ejemplo de MDN):
function enableBeforeUnload() {
window.onbeforeunload = function (e) {
return "Discard changes?";
};
}
function disableBeforeUnload() {
window.onbeforeunload = null;
}
Luego define 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, solo se advertirá al usuario sobre la posibilidad de navegar si ha cambiado el área de texto y no se le preguntará cuando esté enviando el formulario.
Esta es una forma fácil de presentar el mensaje si se ingresan datos en el formulario, y no mostrar el mensaje si se envía el formulario:
$(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;
});
})
Hay un parámetro "onunload" para la etiqueta del cuerpo que puede llamar funciones javascript desde allí. Si devuelve falso, evita navegar lejos.
Lo que quieres usar es el evento onunload en JavaScript.
Aquí hay un ejemplo: http://www.w3schools.com/jsref/event_onunload.asp
Para ampliar la ya sorprendente respuesta de Keith :
Mensajes de advertencia personalizados
Para permitir mensajes de advertencia personalizados, puede envolverlos 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;
}
Luego simplemente llama a esa función con tu mensaje personalizado:
preventNavigation("Baby, please don''t go!!!");
Habilitando la navegación de nuevo
Para volver a habilitar la navegación, todo lo que necesita hacer es configurar window.onbeforeunload en null . Aquí está, envuelto en una pequeña función que se puede llamar en cualquier lugar:
function enableNavigation() {
window.onbeforeunload = null;
}
Usando jQuery para enlazar esto para formar elementos
Si usa jQuery, esto puede vincularse fácilmente 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.");
});
Luego, para permitir que el formulario sea enviado:
$("#yourForm").on("submit", function(event) {
enableNavigation();
});
Formas dinámicamente modificadas:
preventNavigation() y enableNavigation() pueden vincularse a cualquier otra función según sea necesario, como modificar dinámicamente un formulario o hacer clic en un botón que envía una solicitud de AJAX. Hice esto agregando un elemento de entrada oculto al formulario:
<input id="dummy_input" type="hidden" />
Luego, en cualquier momento en que quiera evitar que el usuario se aleje, desencadeno el cambio en esa entrada para asegurarme de que se preventNavigation() :
function somethingThatModifiesAFormDynamically() {
// Do something that modifies a form
// ...
$("#dummy_input").trigger("change");
// ...
}
Para hacer que esto funcione en Chrome y Safari, deberías hacerlo así
window.onbeforeunload = function(e) {
return "Sure you want to leave?";
};
Referencia: https://developer.mozilla.org/en/DOM/window.onbeforeunload
Puede agregar un evento onchange en el área de texto (o cualquier otro campo) que establezca una variable en JS. Cuando el usuario intenta cerrar la página (window.onunload), verifica el valor de esa variable y muestra la alerta en consecuencia.
Se puede hacer fácilmente estableciendo un ChangeFlag en verdadero, en el evento onChange de TextArea . Utilice javascript para mostrar el cuadro de diálogo de confirmación según el valor de ChangeFlag . Descarte el formulario y navegue a la página solicitada si la confirmación devuelve verdadero, de lo contrario no haga nada .
aqui esta 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í es como 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!");
}
}
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."
}
});
para gente nueva que está buscando una solución simple, simplemente pruebe Areyousure.js
Con JQuery esto es bastante fácil de hacer. Ya que puedes enlazar a conjuntos.
NO es suficiente para hacer la carga antes de la descarga, solo quieres activar la navegación si alguien comenzó a editar cosas.