Django, Javascript: Formular über Javascript in DOM injiziert innerHtml stürzt Google Chrome Tab beim Abschicken ab. Funktioniert im IE
Ich habe ein Bookmarklet geschrieben, das ein Django-Formular empfängt und es über das innere HTML eines neuen div-Elements in den Dom einfügt, das über Javascript erstellt und an den Textkörper eines vorhandenen HTML-Dokuments angehängt wurde. Die erste Übermittlung ist eine Ajax-Anforderung (funktioniert einwandfrei). Wenn das Formular von Django aufgrund eines unbekannten Benutzers abgelehnt wird, wird die Übermittlungsfunktion von Ajax gelöst und ohne Ajax erneut in ein Popup-Fenster übertragen, um den Benutzer ohne CORS zu authentifizieren. Der Prozess funktioniert einwandfrei in IE, stürzt jedoch den Chrome-Tab ab, wenn auf die Senden-Schaltfläche geklickt wird.
Tests: Ich dachte, vielleicht war es die anfängliche Ajax-Übermittlung, die das Problem verursachte. Wenn ich jedoch den gleichen Prozess ohne Ajax bei der Injektion verwende, schlägt die Übermittlung ebenfalls fehl. Wenn ich den HTML-Code aus dem Browser kopiere, nachdem meine Injektion abgeschlossen ist, und ein neues HTML-Dokument erstelle, dann öffne ich es in Chrome. Alles funktioniert einwandfrei. Auch wenn ich das Div mit den Formularfeldern vor der Injektion lösche, funktioniert der Submit-Button. Dies lässt mich glauben, dass es etwas mit dem Einfügen des Formulars zu tun hat, nachdem der Dom auf der vorhandenen Seite geladen wurde. Gibt es eine Möglichkeit, den Dom neu zu laden, ohne dass eine Seitenaktualisierung erforderlich ist, oder den inneren HTML-Code zu zwingen, sich bei der Injektion ordnungsgemäß im Dom zu registrieren?
Keine Konsolenfehler, nur ein Klick! Beim Anzeigen dieser Webseite ist ein Fehler aufgetreten.
Gehen Sie folgendermaßen vor, um das Problem zu replizieren: (Ich arbeite unter Windows 8 mit Chrome Version 23.0.1271.64 m.)
(Schritt 1) gehe zu einer Bild-URL: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(Schritt 2) Gehen Sie zur Chrome-Konsole und geben Sie den folgenden Code ein:
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);
(Schritt 3) Klicken Sie auf "Senden" und sehen Sie, wie Chrome abstürzt!
(Schritt 4) Wenn der exakt gleiche Code vor dem DOM-Laden geladen wird, funktioniert er. Fügen Sie Folgendes in ein neues Textdokument ein und speichern Sie es als .html.
<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>
(Schritt 5) Öffnen Sie die HTML-Datei mit Chrome und Submit wird nicht abstürzen.