Django，Javascript：通过javascript innerHtml注入到DOM的表单提交时崩溃了google chrome选项卡。在IE中工作 [英] Django, Javascript: Form injected into DOM via javascript innerHtml crashes google chrome tab on submit. Works in IE

问题描述

我写了一个bookmarklet，它接收一个Django表单，并通过javascript创建的一个新的div元素的innerHtml插入到Dom中，并附加到现有的html文档的主体。第一次提交是一个ajax请求（工作正常），如果表单被Django由于未知用户拒绝，提交功能从ajax解除绑定，并重新提交没有ajax到弹出窗口认证没有CORS的用户。该过程在IE中完美无缺，但当点击提交按钮时崩溃chrome标签。

测试：我想也许是最初的ajax提交导致的问题。但是，如果我在注入时使用没有ajax的相同进程，提交也会失败。如果我在我的注入完成后从浏览器复制html代码并创建一个新的html文档，然后在chrome中打开它一切工作正常。另外，如果我在注入之前删除包含表单域的div，提交按钮工作。这使我相信它与在现有页面加载Dom之后注入表单有关。有没有办法重新加载Dom没有页面刷新或强制innerHtml正确注册Dom注入？

没有控制台的错误，只是一个aww，快速！

要复制此问题，请按照下列步骤操作：（我使用的是Chrome版本23.0.1271.64 m的Windows 8）

（步骤1）请转到immage网址：itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png

（步骤2 ）前往Chrome控制台并输入以下代码：

  o = document.createElement（div）; 
 o.setAttribute（id，overlay）; 
 o.innerHTML ='< div class =modal fadeid =new-pin>< div class =modal-header>< h3> New Pin< / h3& ; / div>< form action =enctype =multipart / form-datamethod =getid =ajaxformname =pin_formclass =form-horizo​​ntal>< div class = modal-body>< div id =div_id_urlclass =control-group>< label class =control-labelfor =id_url> URL< / label& controls>< input type =textname =urlid =id_url/>< / div>< / div>< div id =div_id_imageclass =control-group >< label class =control-labelfor =id_image>或上传< / label>< div class =controls>< input type =filename =imageid =id_image/>< / div>< / div>< div id =div_id_descriptionclass =control-group>< label class =control-labelfor =id_description> ;说明< / label>< div class =controls>< textarea id =id_descriptionrows =10cols =40name =description>< / textarea>< / div ;< / div>< / div>< div class =div_id_tagsclass =control-group>< label class =control-labelfor =id_tags controls>< / div>< / div>< / div>< div class =modal-footer< input type =textname =tagsid =id_tags/> >< div class =messageContainer>< / div>< button id =btnsubmittype =submitclass =btn btn-primary>提交< / button>< a id =cancelonclick =removeOverlay（）data-toggle =modalclass =btn>取消< / a>< / div>< / form>< / div> 
 document.body.appendChild（o）; 
  

（步骤3）点击提交并查看Chrome崩溃！ >

（步骤4）如果在加载DOM之前加载完全相同的代码，它会工作。将以下内容粘贴到新文本文档中并另存为.html。

 < body& 
< script> 
复制并粘贴步骤2中的所有代码
< / script> 
< / body> 
  

（步骤5）使用chrome打开.html文件，然后提交不崩溃。

解决方案

我想出了如何防止Chrome中的崩溃，并在IE中工作！因此，我们可以称之为跨浏览器方式，在dom加载后注入表单，而不会在chrome中导致崩溃。

  $ '#form'）。submit（function（）{
 formData = $（＃form）。serialize（）
 window.location =http：url.to.submitdata /？ ; 
 return false; 
}）; 
  

首先，我们通过使用jQuery捕获submit（）来创建一个自定义提交函数。然后序列化表单数据，并手动将表单数据附加到您要提交表单的网址。最后&最重要的是返回false停止正常的提交功能，防止chrome崩溃！

如果您遵循了我的原始问题中关于复制问题的指示，那么您是如何测试Chrome的替代方法：

（步骤6）完成步骤1&

（步骤7）在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; 
}）; 
} 
  

（第8步）就绪警告，然后单击提交和BOOM！没有碰撞！

我们所做的一切是通过创建一个返回false的自定义jQuery submit（）来防止正常的submit（）触发。首先我们注入jQuery，然后使用jQueryCheckLoad（）等待jQuery准备就绪。然后绑定我们的jQuery submit（）。

*如果任何人有任何想法是什么导致崩溃在chrome我仍然喜欢知道。最奇怪的部分是，当我第一次解开绑定和提交的形式，它非常一致地工作约2个小时的测试，然后只是神秘地开始不断崩溃。有一个小的机会，我修改了我的注射顺序，没有清除书签上的缓存，当我做了它开始崩溃。这使我相信有一种方法可以成功重新加载DOM，而不刷新页面。

I have written a bookmarklet that receives a Django form and inserts it into the Dom via the innerHtml of a new div element created via javascript and appended to the body of an existing html document. The first submit is an ajax request (works fine), if the form is rejected by Django due to an unknown user, the submit function is unbound from ajax and resubmitted without ajax to a pop-up window to authenticate the user without CORS. The process works flawlessly in IE but crashes the chrome tab when the submit button is clicked.

Tests: I thought maybe it was the initial ajax submit that was causing the issue. However, if i use the same process without ajax upon injection, submit fails as well. If i copy the html code from the browser after my injection is complete and create a new html document then open it in chrome everything works fine. Also if i delete the div containing the form fields prior to injection the submit button works. This leads me to believe that it has something to do with injecting the form after the Dom on the existing page has loaded. Is there a way to reload the Dom without a page refresh or force the innerHtml to properly register in the Dom on injection?

No console errors, just an aww, snap! Somethng went wrong while displaying this webpage.

To replicate the issue follow these steps: (I am on windows 8 with Chrome Version 23.0.1271.64 m)
(step 1) goto an immage url: itsblackcurrent.com/wp-content/uploads/2012/07/what-hi.png
(step 2) go to chrome console and enter the following code:

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);

(step 3) Click submit and see Chrome crash!

(step 4) If the exact same code is loaded prior to DOM loading it works. Paste the following into a new text document and save as .html.

<body>
<script>
Copy and paste all the code from step 2 here
</script>
</body>

(step 5) Open the .html file with chrome and submit will not crash.

解决方案

I figured out how to prevent the crash in chrome and also works in IE! So we can call this a cross browser way to inject a form after the dom loads without causing a crash in chrome.

$('#form').submit(function () {
    formData = $("#form").serialize()
    window.location = "http:url.to.submitdata/?"+formData;
    return false;
});

First we have to create a custom submit function by capturing the submit() with jQuery. Then serialize the form data, and manually append the form data to the url where you want to submit the form. Finally & most importantly return false stops the normal submit function and prevents chrome from crashing!

IF YOU FOLLOWED THE INSTRUCTIONS TO REPLICATE THE ISSUE IN MY ORIGINAL QUESTION, HERE IS HOW YOU CAN TEST THE WORKAROUND FOR CHROME:

(step 6) complete steps 1 & 2 from my original question.
(step 7) enter the following code in the chrome console:

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;
    });
}

(step 8) You will see "jQuery Ready" warning in the console, then click submit and BOOM! NO CRASH!

All we did was prevent the normal submit() from firing by creating a custom jQuery submit() that returns false. First we injected jQuery, then used jQueryCheckLoad() to wait for jQuery to be ready. Then bound our jQuery submit().

*If anybody has any idea what is causing the crash in chrome i would still love to know. The strangest part is that when i first did the unbind and submitted the form it worked very consistently for about 2 hours of testing then just mysteriously started crashing constantly. There is a small chance i modified my injection order and did not clear the cache on the bookmarklet, and when i did it started crashing. This leads me to believe that there is a way to successfully reload the DOM without a page refresh.

这篇关于Django，Javascript：通过javascript innerHtml注入到DOM的表单提交时崩溃了google chrome选项卡。在IE中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！