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

需求很简单,点击一个文件链接下载该文件,同时向后台发送请求。需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 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(火狐)浏览器下的兼容问题,希望对大家今后的工作学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax请求过程
火狐浏览器不兼容ajax、firefox火狐浏览器、火狐浏览器ie兼容模式、火狐浏览器兼容模式、火狐浏览器兼容性设置,以便于您获取更多的相关知识。

时间: 2024-12-30 22:29:54

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

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

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

Ajax请求响应中用window.open打开新窗口被拦截的解决方法_AJAX相关

一.问题描述 ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是会被浏览器给拦截了,需要用户点下. 二.问题分析 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了,即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所以被拦截. 说明: 1.如果是在 <a href="javascri

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

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

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

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

VSTO学习笔记(四)从SharePoint 2010中下载文件

原文:VSTO学习笔记(四)从SharePoint 2010中下载文件 上一次我们开发了一个简单的64位COM加载项,虽然功能很简单,但是包括了开发一个64位COM加载项的大部分过程.本次我们来给COM加载项添加一些功能:从SharePoint 2010的文档库中下载一个Excel文档到本地. 示例代码下载 本系列所有示例代码均在 Visual Studio 2010 Ultimate RC + Office 2010 Professional Plus Beta x64 上测试通过.   1.

java-从 url 中下载文件时的错误

问题描述 从 url 中下载文件时的错误 我想从url中读取一个文件,然后定义它为一个File Type public File fileFromUrl(String str) throws IOException { File file = new File ("image.png"); URL url = new URL (str); InputStream input = url.openConnection().getInputStream(); try { OutputStr

安卓开发中sdk manager中下载文件

问题描述 安卓开发中sdk manager中下载文件 SDK Manager中有很多的包,不知道哪些是必须下,哪些是可以选择的,哪些是不用下载的,这样老是在用eclipse的时候出现这样或那样的问题,求指点! 解决方案 你就都下下来,出错是你环境有问题 解决方案二: 全都下载下来以后会提示,当前的开发环境版本过低,让更新,但是又没法更新,后来解决了这个版本问题,模拟器又不能用了,这就是全下下来的后果 解决方案三: 它自己会推荐安装的,install就可以了 解决方案四: 都是可以下载的,一般你使

listview-编写Android程序的过程中R文件消失

问题描述 编写Android程序的过程中R文件消失 自己学习Android按照书上做一个聊天界面的案例,在layout中创建一个XML文件用来做listview的子项布局但是创建完成后gen文件里的R文件消失 主活动报错提示加载R.layout.activity_list_item布局但是layout中并没有这个布局不知道是什么原因 <?xml version="1.0" encoding="utf-8"?> android:layout_width=&

service-从activity中下载文件的错误

问题描述 从activity中下载文件的错误 我使用http连接从web站点下载一个图像,如果下载是在服务器中执行就没有问题,如果我在一个activity中使用相同的方法下载文件就有下面的错误: 08-08 13:27:36.800: W/System.err(8010): android.os.NetworkOnMainThreadException 08-08 13:27:36.800: W/System.err(8010): at android.os.StrictMode$Android