window.location.htm导致动画gif加载程序在Firefox中冻结



我有一个链接,点击后会将用户重定向到同一页面,但有其他参数:

<a id="lnkExportToPDF" href="javascript:void(0)">Export</a>
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
});

在服务器端,我通过检查请求路径中的"导出"来处理它,如果找到了,我会给响应写一个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作为图像,它解决了这个问题,但它非常棘手,而且在居中/填充/边距方面,它的风格在所有浏览器中都有所不同。

第5版:是的。如果我用firebug检查冻结的gif,它会神奇地自我解冻。

我设法在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;

我确认我与firefox有相同的行为,首先想到的是使用SetTimeOut但仍然有相同的动作,所以在firefox上,由于某种原因,这个window.location.href在浏览器上也被称为"停止",这会导致gif动画停止。

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

如果你更改了你的代码,你可以通过链接存档同样的效果。

所以改变这个

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

类似的东西

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

你得到了同样的结果,gif仍然会移动。

这是小提琴测试
在测试中,我添加了移动到贝宝,因为移动缓慢,你可以看到动画是否停止,也可以看到pp不让在iframe上显示,所以在示例中,你留在示例中,不加载页面。

当你点击这个例子时,这个问题只出现在firefox上!

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

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

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

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

允许链接实际启动,但在新选项卡中打开它如何?这不应该打断gif的任何内容,而且在语义上很好,除了我想它会打开一个选项卡。您可以取消内容处置,并允许浏览器/用户决定如何处理它。

<a id="lnkExportToPDF" target="_blank">Export</a>
$('#lnkExportToPDF').click(function (e) {
$(this).attr("href", path + 'users/export/' + parm1 + '/' + parm2);
});

您可以使用带有method="get"的表单并提交它,而不是设置window.location.href。此表单可以编码到HTML中,也可以动态创建。见此答案:

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

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

相关内容

最新更新