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

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/，但除非绝对必要，否则我不想使用它

编辑2：我还尝试使用通用处理程序(.ashx)来处理请求(即更改href以指向处理程序)，但是一旦页面重定向并且写入文件，同样的事情就会发生

编辑3：目前只在Firefox浏览器中出现这个问题。我已经尝试了Chrome和IE，在这些浏览器中gif保持动画状态。(每个最新版本)

编辑4：如果我使用src作为图像的iframe，则可以解决此问题，但这非常hacky，并且在所有浏览器中与居中/填充/边距相关的样式都看起来不同。

编辑5：是的。如果我使用firebug检查静止的gif，它会神奇地解冻自己。

- notAnonymousAnymore

---

你可以尝试使用类似 $('.loader').height() 的方法强制重新绘制 loader.gif。我尝试过了，但无法重现你的问题，所以无法自行测试。但通常在 firebug 修复问题时会起作用。 - pstenstrm

@pstenstrm，我应该提到..我尝试过了，还动态地添加了新的gif和loader.gif？【当前日期】来防止任何缓存。你说你无法重现这个问题？这很奇怪，如果需要，我可能需要添加更多信息。我现在正在使用spin.js作为解决方案，所以这个问题实际上只是出于好奇。 - notAnonymousAnymore

实际上，如果可能的话，我宁愿继续使用gif。 - notAnonymousAnymore

我想知道Firefox是否会在href更改时“暂停”gif动画，假设不再使用渲染周期来呈现页面，因为它正在改变？无论如何，这很奇怪，不应该发生。你能展示一下负责渲染加载gif的代码吗？ - Skone

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;

- pstenstrm

---

感谢您的努力！您不必做那么多。这种方法的问题是一些浏览器会阻止弹出窗口。我曾考虑过这样做，但最终决定这是不好的做法。 - notAnonymousAnymore

这是一个有趣的问题。我已经编辑了我的帖子，提供了另一种解决方案。 - pstenstrm

好的，iframe解决方案很好用。我可能会选择它。再次感谢。 - notAnonymousAnymore

Answer 2

我确认在Firefox浏览器中出现了相同的行为，我首先想到使用SetTimeOut，但仍然出现了相同的行为。因此，在某些原因下，Firefox浏览器会调用"Stop"，从而导致gif动画停止。因此，我发现并解决了问题，这种情况不会发生在简单的链接上。如果您更改代码，可以使用链接实现相同的效果。请将此更改为：

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

将文本转换为以下内容：

变成这样

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

如果你复制代码并运行，你会得到相同的结果，并且gif仍将继续移动。

这是fiddle测试。
在测试中，我添加了跳转到paypal的操作，因为移动速度很慢，你可以看到动画是否停止，而且pp不允许在iframe上显示，所以在示例中你呆在示例里不会加载页面。

当你点击这个示例时，问题只出现在火狐浏览器上！

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

我认为另一个问题是，如果您需要在单击时将参数传递到下一页，则可能需要在单击之前重新设计并修复它们。
这是可能的，因为肯定不取决于动态创建链接上的最后一次单击。因此，请在单击之前使用其参数创建链接。

- Aristos

---

不能像这样实现，因为我无法在单击之前设置参数。目前，我倾向于使用pstenstrm的iframe解决方案。 - notAnonymousAnymore

@user982119 一个可能的替代方案 -但我没有尝试过- 是使用计时器和一系列CSS更改来制作图像的动画。另一个方案类似于这个http://jsfiddle.net/simurai/CGmCe/ - Aristos

Answer 3

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

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

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

- user1693593

Answer 4

怎么样允许链接实际触发，但在新标签页中打开它呢？ 这不会对gif有任何干扰，并且在语义上也没问题，只是可能会留下一个标签页。你可以取消content-disposition，让浏览器/用户决定如何处理它。

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

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

- David

Answer 5

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

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

- Holger Böhnke

Answer 6

这是我的解决方案。它比我找到的任何修复或解决方法都更快更容易。只需在Chrome中打开问题页面。Chrome有自己的问题，但这不是其中之一。每当我遇到一个充满gif的页面导致Firefox冻结时，我只需复制URL，关闭选项卡，打开Chrome并粘贴URL即可。它每次都有效！ :o)

- Oliver Clozoff