Question

我有一个包含＆＃34;处理＆＃34;提交表单时触发的动画。

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

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

//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（这会影响更多用户，我认为）。

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

问题隐藏＆＃34;处理＆＃34;启动画面

1 个答案: