javascript - jscrambler - node js obfuscator
¿Marco cliente/JS para la protección de "datos no guardados"? (6)
Tenemos una aplicación web típica que es esencialmente una aplicación de ingreso de datos con muchas pantallas, algunas de las cuales tienen cierto grado de complejidad. Necesitamos proporcionar esa capacidad estándar para asegurarnos de que si el usuario olvida hacer clic en el botón "Guardar" antes de navegar o cerrar su navegador recibe una advertencia y puede cancelar (pero solo cuando no hay datos sucios o no guardados).
Sé lo básico de lo que tengo que hacer, de hecho, estoy seguro de que ya lo he hecho todo a través de los años (vinculado a antes de descargar, seguir el estado "sucio" de la página, etc. ) pero antes de embarcarme en codificar esto, ¿alguien tiene alguna sugerencia para las bibliotecas que ya existen (gratuitas o no) que ayudarán?
Una pieza del rompecabezas:
/**
* Determines if a form is dirty by comparing the current value of each element
* with its default value.
*
* @param {Form} form the form to be checked.
* @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>
* otherwise.
*/
function formIsDirty(form)
{
for (var i = 0; i < form.elements.length; i++)
{
var element = form.elements[i];
var type = element.type;
if (type == "checkbox" || type == "radio")
{
if (element.checked != element.defaultChecked)
{
return true;
}
}
else if (type == "hidden" || type == "password" || type == "text" ||
type == "textarea")
{
if (element.value != element.defaultValue)
{
return true;
}
}
else if (type == "select-one" || type == "select-multiple")
{
for (var j = 0; j < element.options.length; j++)
{
if (element.options[j].selected !=
element.options[j].defaultSelected)
{
return true;
}
}
}
}
return false;
}
Y otro :
window.onbeforeunload = function(e)
{
e = e || window.event;
if (formIsDirty(document.forms["someFormOfInterest"]))
{
// For IE and Firefox
if (e)
{
e.returnValue = "You have unsaved changes.";
}
// For Safari
return "You have unsaved changes.";
}
};
Envuélvelo todo, y ¿qué obtienes?
var confirmExitIfModified = (function()
{
function formIsDirty(form)
{
// ...as above
}
return function(form, message)
{
window.onbeforeunload = function(e)
{
e = e || window.event;
if (formIsDirty(document.forms[form]))
{
// For IE and Firefox
if (e)
{
e.returnValue = message;
}
// For Safari
return message;
}
};
};
})();
confirmExitIfModified("someForm", "You have unsaved changes.");
Probablemente también desee cambiar el registro del controlador de eventos beforeunload para usar el registro de eventos de LIBRARY_OF_CHOICE .
Si usas jQuery, aquí hay un truco fácil:
$(''input:text,input:checkbox,input:radio,textarea,select'').one(''change'',function() {
$(''BODY'').attr(''onbeforeunload'',"return ''Leaving this page will cause any unsaved data to be lost.'';");
});
Pero recuerde, si tiene una condición a la que redirecciona desde esta página, o si desea permitir una publicación satisfactoria en el formulario, debe hacer esto antes de esa redirección o enviar el evento de la siguiente manera:
$(''BODY'').removeAttr(''onbeforeunload'');
... o te pondrás en un bucle en el que te seguirá preguntando.
En mi caso, tenía una gran aplicación y estaba haciendo location.href redirects en Javascript, así como en la publicación de formularios, y luego algunos AJAX los envían y luego regresan con una respuesta exitosa en línea en la página. En cualquiera de esas condiciones, tuve que capturar ese evento y usar la llamada removeAttr ().
Quería expandirme ligeramente en el excelente código jQuery de Volomike.
Entonces, con esto, contamos con un mecanismo muy genial y elegante para lograr el objetivo de prevenir la pérdida inadvertida de datos a través de navegar fuera de los datos actualizados antes de guardar, es decir. campo actualizado en una página, luego haga clic en un botón, enlace o incluso en el botón Atrás en el navegador antes de hacer clic en el botón Guardar.
Lo único que debe hacer es agregar una etiqueta de clase "no Warner" a todos los controles (especialmente a los botones Guardar) que hacen una publicación en el sitio web, que guarda o no elimina los datos actualizados.
Si el control hace que la página pierda datos, es decir. navega a la página siguiente o borra los datos; no es necesario que haga nada, ya que los scripts mostrarán automáticamente el mensaje de advertencia.
¡Increíble! ¡Bien hecho, Volomike!
Simplemente tenga el código jQuery de la siguiente manera:
$(document).ready(function() {
//----------------------------------------------------------------------
// Don''t allow us to navigate away from a page on which we''re changed
// values on any control without a warning message. Need to class our
// save buttons, links, etc so they can do a save without the message -
// ie. CssClass="noWarn"
//----------------------------------------------------------------------
$(''input:text,input:checkbox,input:radio,textarea,select'').one(''change'', function() {
$(''BODY'').attr(''onbeforeunload'',
"return ''Leaving this page will cause any unsaved data to be lost.'';");
});
$(''.noWarn'').click(function() { $(''BODY'').removeAttr(''onbeforeunload''); });
});
Además de la respuesta de Lance, pasé una tarde tratando de hacer funcionar este fragmento. En primer lugar, jquery 1.4 parece tener errores al vincular el evento de cambio (a partir de Feb ''10). jQuery 1.3 está bien. En segundo lugar, no puedo obtener jquery para enlazar onbeforeunload / beforeunload (sospecho IE7, que estoy usando). He intentado diferentes selectores, ("cuerpo"), (ventana). He intentado ''.bind'', ''.attr''. Volviendo a js puros funcionó (también vi algunas publicaciones similares en SO sobre este problema):
$(document).ready(function() {
$(":input").one("change", function() {
window.onbeforeunload = function() { return ''You will lose data changes.''; }
});
$(''.noWarn'').click(function() { window.onbeforeunload = null; });
});
Tenga en cuenta que también he usado el selector '': input'' en lugar de enumerar todos los tipos de entrada. Estrictamente exagerado, pero pensé que era genial :-)
Hice una pequeña mejora más a las implementaciones de jQuery enumeradas en esta página. Mi implementación se manejará si tiene validada la página ASP.NET del lado del cliente y está siendo utilizada en una página.
Evita el "error" de borrar la función onBeforeLeave cuando la página no se publica al hacer clic debido a un error de validación. Simplemente use la clase no-warn-validate en los botones / enlaces que causan la validación. Todavía tiene la clase no-warn para usar en los controles que tienen CausesValidation=false (por ejemplo, un botón "Guardar como borrador"). Este patrón probablemente podría usarse para otros marcos de validación que no sean ASP.NET, así que publico aquí como referencia.
function removeCheck() { window.onbeforeunload = null; }
$(document).ready(function() {
//-----------------------------------------------------------------------------------------
// Don''t allow navigating away from page if changes to form are made. Save buttons, links,
// etc, can be given "no-warn" or "no-warn-validate" css class to prevent warning on submit.
// "no-warn-validate" inputs/links will only remove warning after successful validation
//-----------------------------------------------------------------------------------------
$('':input'').one(''change'', function() {
window.onbeforeunload = function() {
return ''Leaving this page will cause edits to be lost.'';
}
});
$(''.no-warn-validate'').click(function() {
if (Page_ClientValidate == null || Page_ClientValidate()) { removeCheck(); }
});
$(''.no-warn'').click(function() { removeCheck() });
});
Creé un complemento de jQuery que se puede usar para implementar una característica de advertencias sobre cambios no guardados para aplicaciones web. Es compatible con las devoluciones de datos. También incluye un enlace a información sobre cómo normalizar el comportamiento del evento onbeforeunload de Internet Explorer.