1

我在 Django 应用程序中有一个工作进度条。除了在 Safari 中，该栏仅在奇怪的情况下出现。

首先，我通过 jquery/ajax 组合附加了进度条：

var $progress = $('<div id="upload-progress" class="upload-progress"></div>')
.appendTo($('#webfileuploadform'))
.append('
    <div class="progress-container">
        <div class="progress-info">uploading 0%</div>
        <div class="progress-bar"></div>
    </div>');

//This is all one string, I've just broken it up like this so it's readable.

//Called on form submit
$.ajax({
    ...yada yada...
    success: function(data){
        $progress.show(); <-- shows the div(s)
        ...more yada...

在 Firefox 和 Chrome 中，这一切都很好。在 Safari 中，这实际上也可以正常工作，只是不显示。当我打开 Safari 开发人员工具并深入查看时<form>，我可以看到 DOM 元素正按应有的方式附加到表单中。进度条的宽度和进度信息 div 的文本也在正确更新（在开发人员工具中）。问题是#upload-progressdiv 没有显示在浏览器中，即使我看到它存在于开发人员工具中！

让我大吃一惊的是，如果我在 Safari 中单击灰色的“x”来强制停止页面，就会出现进度条！

另一个奇怪的事情是，一旦我单击表单提交，如果我在我的开发人员工具中突出显示任何 dom 元素，整个页面都会以与整个页面周围的包装 div 相同的颜色被空白！此外，如果我在单击提交按钮之前在开发人员工具中突出显示一个元素，然后单击，页面会直接跳转到空白处。我什至不必在开发人员工具中四处走动。

非常奇怪的行为。我不知道是怎么回事...

我读过一些东西说当 css 与 jquery 一起应用时，safari 不会重绘 DOM？我不认为这是真的，但这与它有关系吗？

更新

所以这个问题即使在 ajax 函数之外仍然存在，但在提交处理程序之外工作。那是：

单击提交按钮时问题仍然存在（此处没有 ajax 代码）

$('#webfileuploadform').submit(function(){
    $('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
    $('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
    ...
});

提交处理程序之外的相同代码有效

$('#webfileuploadform').append('<div id="upload-progress" class="upload-progress">asdf</div>');
$('#upload-progress').append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
$('#webfileuploadform').submit(function(){
    ...
});
4

1 回答 1

2

这是 webkit 的问题。错误报告在这里。Webkit 无法在表单提交后处理 XMLHttpRequests。我使用的一种解决方法是将表单提交到目标 iframe。事实证明，只有当目标与所在的目标相同时才会发生document错误form......

改变目标：

<form action="my_django_view" method="post" enctype="multipart/form-data" id="formID" target="theIframeName">
    ...
</form>

页面上隐藏的 iframe：

<iframe name="theIFrameName" id="style-me-with-display-none"></iframe>

尽管应该注意我在这里使用的是遗留代码，这就是我使用表单处理文件对象的原因。如果您从头开始，现在有更好的方法来处理文件对象，应该避免这种方法。

于 2013-05-31T13:26:39.213 回答