Django, Javascript: Form wstrzykiwany do DOM za pomocą javascript innerHtml powoduje awarię karty chrome Google po przesłaniu. Działa w IE
Napisałem bookmarklet, który odbiera formularz Django i wstawia go do Dom za pomocą innerHtml nowego elementu div utworzonego przez javascript i dołączonego do treści istniejącego dokumentu html. Pierwsze zgłoszenie to żądanie ajax (działa dobrze), jeśli formularz zostanie odrzucony przez Django z powodu nieznanego użytkownika, funkcja wysyłania jest niezwiązana z ajaxem i ponownie wysłana bez ajax do wyskakującego okna, aby uwierzytelnić użytkownika bez CORS. Proces działa bezbłędnie w IE, ale zawiesza zakładkę chrome, gdy kliknięty zostanie przycisk przesyłania.
Testy: Myślałem, że może to był pierwszy ajax, który spowodował problem. Jednakże, jeśli użyję tego samego procesu bez Ajaxa przy wtrysku, przesyłanie nie powiedzie się. Jeśli skopiuję kod HTML z przeglądarki po zakończeniu wstrzykiwania i utworzeniu nowego dokumentu HTML, otwórz go w chrome wszystko działa dobrze. Również jeśli usunęłam div zawierający pola formularza przed wstrzyknięciem, przycisk przesyłania działa. To prowadzi mnie do przekonania, że ma to coś wspólnego z wstrzykiwaniem formularza po załadowaniu Dom na istniejącej stronie. Czy istnieje sposób na ponowne załadowanie Dom bez odświeżania strony lub wymuszenie prawidłowej rejestracji innerHtml w Dom podczas iniekcji?
Bez błędów konsoli, tylko aww, snap! Coś poszło nie tak podczas wyświetlania tej strony.
Aby zreplikować problem, wykonaj następujące kroki: (Jestem na systemie Windows 8 z Chrome w wersji 23.0.1271,64 m)
(krok 1) goto an immage url: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(krok 2) przejdź do konsoli chrome i wprowadź następujący kod:
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);
(krok 3) Kliknij Wyślij i zobacz awarię Chrome!
(krok 4) Jeśli dokładnie ten sam kod zostanie załadowany przed załadowaniem DOM, działa. Wklej następujące elementy do nowego dokumentu tekstowego i zapisz jako .html.
<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>
(krok 5) Otwarcie pliku .html za pomocą chrome i przesłanie nie spowoduje awarii.