问题隐藏“正在处理”启动画面

Question

我有一个 div，其中包含在提交表单时触发的“处理”动画。

<form action='index.php?page=2' method='post' onsubmit="javascript:processingBox();">

适用于大多数页面。 我遇到的问题是，我的一些表单使用以下代码触发了下载：

//BEGIN DOWNLOAD HEADER SECTION//
header("Pragma: public", true);
header("Expires: 0"); // set expiration time
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header('Content-Disposition: attachment; filename='.$filename);
header("Content-Transfer-Encoding: binary");
header('Connection: Keep-Alive');

//WRITE OUT HEADER//
echo $output;
//WRITE OUT RECORDS//
while ($row = mysqli_fetch_array($sql)) {
    $output = "";
    for ($i = 0; $i < $columns_total; $i++) {
        $output .= $_POST['enclosed'] . $row["$i"] . $_POST['enclosed'] . $_POST['delimiter'];
    }
    echo "\r\n";
    echo substr($output,0,strlen($output)-1);
}
exit;

这里明显的问题是，这个脚本不会刷新页面（因为它的设计目的是不刷新），但它不会清除提交时可见的处理启动画面。

此方案的任何最佳实践？

编辑：

 <script type="text/javascript">
function processingBox() {
    div = document.getElementById('processingBox');
    div.style.visibility = "visible";
}
</script>

<div class='processingBox' id='processingBox'>
    <h1 style='margin-top:0px;margin-bottom:30px;'>Processing</h1>
    <div class="circle"></div>
    <div class="circle1"></div>
</div>

Answer 1

这是一个出了名的棘手问题，它有几种不同程度的令人不快的解决方案。以下是我所知道的最好的：

使用服务器上的文件：使用 Ajax（或 XHR，如果您不使用 javascript 库）提交表单内容，并在服务器端保存记录到一个临时文件，而不是直接将它们回显给用户，然后返回一个指向该文件的链接。回到浏览器中，当这个 Ajax 完成时，您可以移除处理框，并将用户定向到返回的链接。这是不愉快的，因为它需要两个请求，并且您必须写入服务器上的磁盘（但它适用于 100% 的浏览器！）。

使用 cookie： 接受this question 的答案是最全面的解决方案，仅适用于一个请求，但它很复杂并且需要 cookie（一小部分用户禁用）。

使用 iframe： 另一种选择是让您的表单以隐藏的 iframe 为目标，并使用 iframe 的 onload 事件移除处理框。

<iframe id="downloadTarget" onload="removeProcessingBox();"></iframe>
<form ... target="downloadTarget" ... ></form>

但不幸的是，Chrome doesn't fire the onload event for file downloads（我认为这会影响更多的用户）。

我的建议：对于文件下载，请跳过处理动画，只需要一些文字说明可能需要一点时间...