3

我编写了一个书签，它接收一个 Django 表单，并通过一个新的 div 元素的 innerHtml 将其插入 Dom，该元素是通过 javascript 创建的，并附加到现有 html 文档的正文中。第一次提交是一个 ajax 请求（工作正常），如果表单由于未知用户而被 Django 拒绝，则提交函数与 ajax 解除绑定，并在没有 ajax 的情况下重新提交到弹出窗口以验证没有 CORS 的用户。该过程在 IE 中完美运行，但在单击提交按钮时会使 chrome 选项卡崩溃。

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

没有控制台错误，只是一个 aww，快照！显示此网页时出现问题。

要复制问题，请按照以下步骤操作：（我在 Windows 8 上使用 Chrome 版本 23.0.1271.64 m）
（步骤 1）转到图像 url：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 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步）用chrome打开.html文件，提交不会崩溃。

4

2 回答 2

1

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

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

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

如果您按照说明在我的原始问题中复制该问题，您可以通过以下方式测试 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 Ready”警告，然后单击提交和 BOOM！没有崩溃！

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

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

于 2012-11-13T21:58:56.787 回答
0

这是一个使您的 chrome 浏览器崩溃的 javascript 小书签。

javascript:var i = 0; while (i < 1) { window.location.reload(true); i = i - 1; };

也只有普通的 javascript 形式（基本上是一样的，但没有 javascript: 在开头，它有单独的行）。

var i = 0;
while (i < 1) {
window.location.reload(true);
i = i - 1;
}

这是一个 url，当您在浏览器中打开它时，它会使用它来崩溃您的浏览器。

https://codehs.com/editor/html/4767743/2616125/index.html

于 2021-09-23T19:01:53.400 回答