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

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

分类:js_jQuery答疑 - 常见问题 · 发布时间:2021-11-16 16:28 · 阅读:9301

需求很简单,点击一个文件链接下载该文件,同时向后台发送请求。需求很常见,用户点击下载后通常要

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

demo 代码如下:

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

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

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

打开该页面,随即进行 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 标签的默认跳转不属于 Javascript 线程能控制的范围,所以这个延迟阈值的设置非常重要,我本地测试结果居然是 2ms(也是万万没想到),一般设置为 100ms 左右就 ok 了。 这个方法不优雅,不应该使用 。

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

标签:
ajax 请求 过程 火狐 兼容

相关文章

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

AJAX的跨域问题解决方案

跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

利用Ajax实现智能回答的机器人示例代码

这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

ajax、axios和fetch之间优缺点重点对比总结

今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下

如何通过axios发起Ajax请求(最新推荐)

Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下

返回分类 返回首页