Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

需求很简单，点击一个文件链接下载该文件，同时向后台发送请求。需求很常见，用户点击下载后通常要进行下载量的统计，统计的话可以利用 script标签 或者 img标签（图片ping） 的跨域能力，将它们的 src 属性指向统计地址，但是这次用了 ajax 进行统计，遂出现了这个问题。

demo 代码如下：

<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
<script src="jQuery.js"></script>
<script>
document.getElementById("a").onclick = function(e) {
$.post("data.php");
};
</script>

我们都知道，如果一个 a 标签同时拥有 onclick 事件和 href 属性，onclick 事件的回调会在默认事件（即跳转）之前执行，这也正是可以在 onclick 事件中用类似 e.preventDefault() 的代码去除默认事件（即跳转）的原因。所以以上代码，如果点击 a 标签，首先会执行 onclick 事件的回调，即发送 ajax 请求，理论上，因为代码中的 ajax 是异步的（其实同步也一样），所以会一边请求一边打开下载文件。

chrome、UC、opera、2345浏览器中表现均和预期一致，firefox 下点击能跳出下载文件，但是 ajax 部分报错，IE 下未测试。

一开始的错误想法是，跨域导致报错。当点击下载链接时，ajax 请求会以为页面即将跳到 href 所指的地址，导致浏览器以为该 ajax 跨域。该错误想法很快被推翻，一是因为先进行 ajax 请求，所以请求瞬间并未跨域；二是并未报跨域错误（通常如果是跨域错误控制台会指出）；三是如下代码更进一步证明了该错误。

<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
<script src="jQuery.js"></script>
<script>
$.post("data.php"); // data.php sleep(100)
</script>

打开该页面，随即进行 ajax 请求，一旦点击了下载按钮，请求即被中止。如果 a 标签的 href 属性值不是文件地址，而是用任意的一个 url 替换，如果点击 a 标签，页面会立即跳转到该标签所指向的地址，页面都不存在了，ajax 自然也就中断了。如果 a 标签指向的是文件地址，在 ff 下是不是也会被一样地解析呢（浏览器以为要跳到该地址了，而将 ajax 中止）？

答案是肯定的，我在 stackoverflow 中找到了答案。

When clicking the download link you are leaving the page, even it does not look so. If there would no file transfer, you would see the requested page.. try to set a target="_blank" or use an iframe as target for the link.

从提问可以看出，2010 年时 chrome 和 ff 都有类似的问题，而 chrome 或者说是 webkit 内核的浏览器在之后的版本迭代中修复了这个问题， ff 则一直将问题留到了现在（个人认为这不太合理）。

知道了问题的根源，解决方案也就呼之欲出了。

方法一：

最简单的方法无非是给 a 标签加上 target="_blank"，事实上，通常网页都是这么做的，这也是值得肯定的做法。

方法二：

既然 a 标签的默认行为会使得 ajax 请求中断，那么将 "默认行为" 放在请求之前呢？

<a id="a" href="javascript:;" >click</a>
<script src="jQuery.js"></script>
<script>
document.getElementById("a").onclick = function(e) {
location.href = "http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe";
$.post("data.php");
};
</script>

方法三：

设置定时器使请求延迟，但是因为 a 标签的默认跳转不属于 Javascript 线程能控制的范围，所以这个延迟阈值的设置非常重要，我本地测试结果居然是 2ms（也是万万没想到），一般设置为 100ms 左右就 ok 了。 这个方法不优雅，不应该使用 。

<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe" >click</a>
<script src="jQuery.js"></script>
<script>
document.getElementById("a").onclick = function(e) {
setTimeout(function() {
$.post("data.php");
}, 100);
};
</script>

以上内容给大家介绍了Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题，希望对大家今后的工作学习有所帮助。

赞 (0)

相关推荐

  • 解决IE下AjaxSubmit上传文件提示下载文件问题

    springmvc后端: @RequestMapping(value="scoreFileUpload",produces = "text/html; charset=utf-8") @ResponseBody public String upload(HttpSession session,@RequestParam("file1") MultipartFile file,@RequestParam("paperId") S

  • JavaScript读二进制文件并用ajax传输二进制流的方法

    综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌.IE11.IE10. htmlbody里的内容,没什么特殊的. <div id="dConfirm"> <p style="float: left;margin-left: 20px;margin-top: 20px"> <form action="javascript: uploadAndSubmit();" name="demoForm&quo

  • Ajax请求二进制流进行处理（ajax异步下载文件）的简单方法

    摘要: ajax请求一个二进制流(文件),转换为Blob进行处理或者下载保存文件 需求 管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载. 文件不大,页面放置"导出"按钮,点击按钮后弹出保存文件对话框保存 说明:第一种方法使用a标签直接可以满足大部分人需求,第二种方法纯粹是在说实现方法以及更好的操作体验,不需要(举一个需要第二种方法的例子:如果生成很慢就需要生成过程中禁用按钮,防止连续生成)用到的可以不用看 解决方案 方法一 请求文件的接口能改为GET则可以使用这种方

  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

  • Ajax在请求过程中显示进度的简单实现

    Ajax在请求过程中显示进度的简单实现

    Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求):调用完成后,图片消失,当前页面运行重新编辑.以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左).当用户点击该链接之后,Ajax请求开始,GIF图片显示"Loading"状态,同时当前页面被"罩住"防止用户继续点击L

  • 从Springboot项目中下载文件的具体过程

    最近在做一个临时的项目,APP端在检测到程序有更新时,需要去后台下载新的安装包.具体过程如下: controller层: /** * 下载app * @param response */ @RequestMapping("downApp") @ResponseBody public void Download(HttpServletResponse response) { String fileName ="wuye.apk"; String result = Fi

  • 通过jquery的ajax请求本地的json文件方法

    自己学习jquery的ajax的经历,记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id="test"></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.ajax({ //请求方式为get type:"GET", //json文件位置 url:"./data/shuju.json"

  • Linux ftp 命令行中下载文件get与上传文件put的命令应用详解

    介绍:从本地以用户anok登录的机器192.168.0.16上通过ftp远程登录到192.168.0.6的ftp服务器上,登录用户名是peo.以下为使用该连接做的实验. 查看远程ftp服务器上用户peo相应目录下的文件所使用的命令为:ls,登录到ftp后在ftp命令提示符下查看本地机器用户anok相应目录下文件的命令是:!ls.查询ftp命令可在提示符下输入:?,然后回车. 1.从远程ftp服务器下载文件的命令格式: get  远程ftp服务器上当前目录下要下载的文件名  [下载到本地机器上当前

  • AES加解密在php接口请求过程中的应用示例

    在php请求接口的时候,我们经常需要考虑的一个问题就是数据的安全性,因为数据传输过程中很有可能会被用fillder这样的抓包工具进行截获.一种比较好的解决方案就是在客户端请求发起之前先对要请求的数据进行加密,服务端api接收到请求数据后再对数据进行解密处理,返回结果给客户端的时候也对要返回的数据进行加密,客户端接收到返回数据的时候再解密.因此整个api请求过程中数据的安全性有了一定程度的提高. 今天结合一个简单的demo给大家分享一下AES加解密技术在php接口请求中的应用. 首先,准备一个AE

  • 微信服务器中下载文件到本地的实例代码

    从微信服务器中下载文件到本地的实例代码,如下所示: //从微信服务器中下载文件到本地 public JsonResult UploadRecord(string ServerId) { try { member m = base.CurrentUser; string msg = "成功"; bool success = true; SiteSettingsInfo setting = base.CurrentSiteSetting; string file = string.Empt

  • ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD

  • 页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    1.页面缩放用到的技术点 (1)zoom zoom:normal | <number> | <percentage> 默认值:normal 适用于:所有元素 继承性:有 可以使用用浮点数和百分比来定义缩放比例. zoom的浏览器兼容性:http://caniuse.com/#search=zoom zoom的兼容性:firefox 全系列不支持. (2)transform transform:scale(1.1,1.1); scale(x,y) 定义 2D 缩放转换. 兼容性:ht

  • 在ASP.NET中下载文件的实现代码

    这是笔者常被问到的一个问题,如何通过ASP.NET来下载文件,这个问题可大可小,我们先从小的开始.当我们要让用户下载一个文件,最简单的方式是通过Response.Redirect指令: Response.Redirect("test.doc") 您可以把上面这行指令放在Button的Click事件当中,当用户点击按钮之后,网页就会被转址到该word档,造成下载的效果. 但是这样的下载有几个问题: 1. 无法下载不存在的文件:例如,我们若是想把程序动态(临时)产生的文字,当作一个文件下载

随机推荐