Question

我有一个链接，点击后会将用户重定向到同一页面，但附加参数除外：

<a id="lnkExportToPDF" href="javascript:void(0)">Export</a>

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();
    window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
});

在服务器端，我通过检查请求路径中的“export”来处理它，如果找到它，我会将PDF文件写入响应：

System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "application/pdf");
response.AddHeader("Content-Disposition", String.Format("attachment; filename=" + filename + ".pdf; size={0}", buffer.Length.ToString()));
response.BinaryWrite(buffer);
response.End();

一切正常，用户可以下载文件，但是使用页面上loader.gif的用户的任何其他操作都会显示未动画的加载程序。

可能导致这种情况发生的原因是什么？在响应完成后有没有办法刷新/重新加载页面/ javascript？

编辑我在这里找到了一个有用的JS工具：http://fgnass.github.io/spin.js/但除非绝对必要，否则我不想使用它

edit2：我还尝试使用通用处理程序（.ashx）来处理请求（即将href更改为指向处理程序），但是一旦页面重定向和文件写的，同样的事情发生了

edit3：此问题仅发生在Firefox中。我尝试过使用Chrome和IE浏览器，gif在这些浏览器中保持动画效果。（每个的最新版本）

edit4：如果我使用带有src的iframe作为图像来解决问题，但它非常hacky并且它的样式在所有浏览器中看起来与中心/填充/边距不同

edit5：是的。如果我用萤火虫检查冷冻的GIF，它就会神奇地解开它自己。

Answer 1

我设法在firefox中重新创建了这个问题，我真的找不到一种“解冻”gif的方法。当我在下载后添加一个完全不同的文件并且也被冻结时，我放弃了这种方法。

我所做的是测试不同的方式来触发下载。我发现没有window.location解决方案有效，但是有什么用呢：

window.open(path + 'users/export/' + parm1 + '/' + parm2);

window.open会打开一个新标签，然后通过该标签下载文件，而不是window.location当前标签。下载开始后，它将立即返回当前选项卡。

修改

您还可以使用隐藏的iframe：

var iframe = document.getElementById('iframe');
iframe.src = path + 'users/export/' + parm1 + '/' + parm2;

Answer 2

我确认我和firefox具有相同的行为，我想到的第一个就是使用SetTimeOut但仍然是相同的行为，所以在Firefox上由于某种原因，这个window.location.href也称为“在浏览器上停止，这会导致gif动画停止。

所以我发现了你可以解决你的问题，这不会发生在简单的链接上。

如果您更改了代码，则可以使用链接归档相同的效果。

所以改变这个

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();
    window.location.href = "page.aspx";
});

这样的事情

$('#lnkExportToPDF').attr("href", "page.aspx");

你有相同的结果，gif仍然会移动。

Here is the fiddle test。
在测试中我添加到移动到贝宝，因为是慢动作，你可以看到动画停止或不，也不要在iframe上显示，所以例如你保持在示例而不加载页面。

当您单击此示例时，问题仅出现在firefox上！

http://jsfiddle.net/hn7S9/4/

我认为另外一个问题是，如果您需要在点击时将参数设置到下一页，您可能需要重新设计并在点击之前修复它们。
这是可能的，因为当然不取决于动态创建链接的最后一次点击。因此，请在点击之前建立与其参数的链接。

Answer 3

您可以尝试使用异步方法点击以允许浏览器在点击启动后解析事件队列：

$('#lnkExportToPDF').click(function (e) {
    e.preventDefault();

    setTimout(function() {
        window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
    }, 20);
});

Answer 4

如何允许链接实际触发，但是在新标签中打开它？这不应该打断gif的任何内容，并且语义上很好，除了我猜它会打开一个标签。您可以摆脱内容处置，并允许浏览器/用户决定如何处理它。

<a id="lnkExportToPDF" target="_blank">Export</a>

$('#lnkExportToPDF').click(function (e) {
    $(this).attr("href", path + 'users/export/' + parm1 + '/' + parm2);
});

Answer 5

您可以使用window.location.href表单并提交，而不是设置method="get"。此表单可以编码到HTML中，也可以动态创建。见这个答案：

https://stackoverflow.com/a/21742326/1614903

Answer 6

这是我的解决方案。它比我发现的任何修复或解决方法更快更容易。只需在Chrome中打开问题页面即可。 Chrome有它自己的问题，但这不是其中之一。每当我遇到一个充满GIF的页面导致Firefox冻结时，我只需复制URL，关闭标签，打开Chrome，然后粘贴到URL中。我每次都在工作！：O）

window.location.href导致动画gif加载器在Firefox中冻结

6 个答案:

修改