Django，Javascript：表单通过javascript innerHtml注入到DOM中当提交时崩溃了Google Chrome标签。在IE中工作

问题描述：

我写了一个书签，它接收一个Django表单，并通过javascript创建的新div元素的innerHtml将其插入到Dom中，并附加到现有html文档的主体中。第一次提交是一个Ajax请求（工作正常），如果表单由于未知用户而被Django拒绝，则submit函数从ajax解除绑定，然后在没有ajax的情况下重新提交到弹出窗口以在没有CORS的情况下对用户进行身份验证。该过程完美地在IE中运行，但当点击提交按钮时会使Chrome页面崩溃。Django，Javascript：表单通过javascript innerHtml注入到DOM中当提交时崩溃了Google Chrome标签。在IE中工作

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

没有控制台错误，只是一个噢，快点！显示此网页时，某些人遇到了问题。

复制问题请按照下列步骤操作：（我在Windows 8上使用Chrome版本23.0.1271.64米）
（步骤1）转到一个IMMAGE网址：itsblackcurrent.com/wp-content/uploads/2012 /07/what-hi.png
（步骤2）去铬控制台，然后输入以下代码：

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

（步骤3）点击提交，看到Chrome的崩溃！

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

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

（步骤5）打开铬.html文件，并提交不会崩溃。

你是否在Google的问题跟踪器上报告过这个问题？ –

我刚刚报道过。问题226644. – arctelix

我还必须做一些其他的事情，包括使用'innerHTML'将页面插入到页面中，并使页面在Chrome中崩溃。虽然不是图像页面，但我只是简单地插入一些带有文本的div。怪异的... – Markasoftware

答

我想出了如何防止在Chrome浏览器崩溃，也适用于IE浏览器！所以我们可以调用这个跨浏览器的方式来在dom加载后注入一个表单，而不会导致chrome崩溃。

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

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

如果按照说明书来复制问题我原来的问题，以下是如何可以测试解决方法反转片：从我原来的问题

（步骤6）完成步骤1 & 2 。
（步骤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步）你会看到在控制台 “的jQuery就绪” 警告，然后点击提交和BOOM！没有冲击！

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

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

Django，Javascript：表单通过javascript innerHtml注入到DOM中当提交时崩溃了Google Chrome标签。在IE中工作

相关推荐