principiantes - Django, Javascript: forma inyectada en DOM a través de javascript innerHtml bloquea la pestaña Google Chrome en submit. Funciona en IE
onsubmit javascript (1)
He escrito un bookmarklet que recibe un formulario de Django y lo inserta en la Dom a través del innerHtml de un nuevo elemento div creado a través de javascript y anexado al cuerpo de un documento html existente. El primer envío es una solicitud ajax (funciona bien), si el formulario es rechazado por Django debido a un usuario desconocido, la función de envío se libera de ajax y se reenvía sin ajax a una ventana emergente para autenticar al usuario sin CORS. El proceso funciona sin problemas en IE, pero bloquea la pestaña de cromo cuando se hace clic en el botón Enviar.
Pruebas: pensé que tal vez era el envío inicial de Ajax lo que estaba causando el problema. Sin embargo, si uso el mismo proceso sin ajax luego de la inyección, el envío falla también. Si copio el código html del navegador después de que se complete mi inyección y cree un nuevo documento html, ábralo en Chrome y todo funciona bien. Además, si elimino el div que contiene los campos del formulario antes de la inyección, el botón de enviar funciona. Esto me lleva a creer que tiene algo que ver con inyectar el formulario después de que se haya cargado el Dom en la página existente. ¿Hay alguna manera de volver a cargar el Dom sin una actualización de página o forzar el innerHtml para que se registre correctamente en Dom on injection?
Sin errores de consola, solo un aww, ¡snap! Somethng salió mal al mostrar esta página web.
Para replicar el problema, siga estos pasos: (Estoy en Windows 8 con la versión de Chrome 23.0.1271.64 m)
(paso 1) goto a immage url: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(paso 2) vaya a la consola de Chrome e ingrese el siguiente código:
o = document.createElement("div");
o.setAttribute("id", "overlay");
o.innerHTML = ''<div class="modal fade" id="new-pin"><div class="modal-header"><h3>New Pin</h3></div><form action="" enctype="multipart/form-data" method="get" id="ajaxform" name="pin_form" class="form-horizontal"><div class="modal-body"><div id="div_id_url" class="control-group"><label class="control-label" for="id_url">URL</label><div class="controls"><input type="text" name="url" id="id_url" /></div></div><div id="div_id_image" class="control-group"><label class="control-label" for="id_image">or Upload</label><div class="controls"><input type="file" name="image" id="id_image" /></div></div><div id="div_id_description" class="control-group"><label class="control-label" for="id_description">Description</label><div class="controls"><textarea id="id_description" rows="10" cols="40" name="description"></textarea></div></div><div id="div_id_tags" class="control-group"><label class="control-label" for="id_tags">Tags</label><div class="controls"><input type="text" name="tags" id="id_tags" /></div></div></div><div class="modal-footer"><div class="messageContainer"></div><button id="btnsubmit" type="submit" class="btn btn-primary">Submit</button><a id="cancel" onclick="removeOverlay()" data-toggle="modal" class="btn">Cancel</a></div></form></div>'';
document.body.appendChild(o);
(paso 3) ¡ Haz clic en enviar y ver Chrome crash!
(paso 4) Si se carga exactamente el mismo código antes de cargar DOM, funciona. Pegue lo siguiente en un nuevo documento de texto y guárdelo como .html.
<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>
(paso 5) Abra el archivo .html con chrome y no se bloqueará.
¡Descubrí cómo evitar el bloqueo en Chrome y también funciona en IE! Así que podemos llamarlo una forma de navegador cruzado para inyectar un formulario después de que el dom se cargue sin causar un bloqueo en Chrome.
$(''#form'').submit(function () {
formData = $("#form").serialize()
window.location = "http:url.to.submitdata/?"+formData;
return false;
});
Primero tenemos que crear una función de envío personalizada capturando el submit () con jQuery. A continuación, serialice los datos del formulario y agregue manualmente los datos del formulario a la url donde desea enviar el formulario. Finalmente, y lo más importante, devuelve paradas falsas la función de envío normal y evita que cromo se bloquee.
SI SIGUIÓ LAS INSTRUCCIONES PARA REPLICAR EL PROBLEMA EN MI PREGUNTA ORIGINAL, AQUÍ ES LA FORMA EN QUE PUEDE PROBAR EL PROBLEMA PARA EL CROMO:
(paso 6) complete los pasos 1 y 2 de mi pregunta original.
(paso 7) ingrese el siguiente código en la consola de Chrome:
s = document.createElement("script")
s.src = src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
document.body.appendChild(s);
jQueryCheckLoad();
function jQueryCheckLoad() {
if( window.$) {
console.warn("jquery is ready");
jqReady();
} else {
window.setTimeout( jQueryCheckLoad, 10 );
}
}
function jqReady() {
$( ''#ajaxform'' ).submit(function () {
formData = $( "#ajaxform" ).serialize()
window.location = "http://url.to.submitdata/?"+formData;
return false;
});
}
(paso 8) Verá la advertencia "jQuery Ready" en la consola, luego haga clic en enviar y ¡BOOM! ¡SIN ACCIDENTE!
Todo lo que hicimos fue evitar que la versión normal de submit () se activara al crear un jQuery submit () personalizado que devuelve false. Primero inyectamos jQuery, luego usamos jQueryCheckLoad () para esperar que jQuery esté listo. Luego atamos nuestro jQuery submit ().
* Si alguien tiene alguna idea de lo que está causando el accidente en Chrome todavía me encantaría saber. La parte más extraña es que cuando por primera vez desconecté y envié el formulario, funcionó de manera muy consistente durante aproximadamente 2 horas de prueba y luego misteriosamente comenzó a fallar constantemente. Hay una pequeña posibilidad de que haya modificado mi orden de inyección y no haya borrado la caché en el bookmarklet, y cuando lo hice comenzó a fallar. Esto me lleva a pensar que hay una forma de volver a cargar el DOM sin una actualización de página.