如何解決Ajax請(qǐng)求過(guò)程中下載文件在FireFox瀏覽器下的兼容問(wèn)題

本篇文章為大家展示了如何解決Ajax請(qǐng)求過(guò)程中下載文件在FireFox瀏覽器下的兼容問(wèn)題，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁(yè)找三站合一網(wǎng)站制作公司,專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開(kāi)發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為上千服務(wù),創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)將一如既往的為我們的客戶(hù)提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣服務(wù)!

需求很簡(jiǎn)單，點(diǎn)擊一個(gè)文件鏈接下載該文件，同時(shí)向后臺(tái)發(fā)送請(qǐng)求。需求很常見(jiàn)，用戶(hù)點(diǎn)擊下載后通常要進(jìn)行下載量的統(tǒng)計(jì)，統(tǒng)計(jì)的話可以利用 script標(biāo)簽或者 img標(biāo)簽（圖片ping）的跨域能力，將它們的 src 屬性指向統(tǒng)計(jì)地址，但是這次用了 ajax 進(jìn)行統(tǒng)計(jì)，遂出現(xiàn)了這個(gè)問(wèn)題。

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>

我們都知道，如果一個(gè) a 標(biāo)簽同時(shí)擁有 onclick 事件和 href 屬性，onclick 事件的回調(diào)會(huì)在默認(rèn)事件（即跳轉(zhuǎn)）之前執(zhí)行，這也正是可以在 onclick 事件中用類(lèi)似 e.preventDefault() 的代碼去除默認(rèn)事件（即跳轉(zhuǎn)）的原因。所以以上代碼，如果點(diǎn)擊 a 標(biāo)簽，首先會(huì)執(zhí)行 onclick 事件的回調(diào)，即發(fā)送 ajax 請(qǐng)求，理論上，因?yàn)榇a中的 ajax 是異步的（其實(shí)同步也一樣），所以會(huì)一邊請(qǐng)求一邊打開(kāi)下載文件。

chrome、UC、opera、2345瀏覽器中表現(xiàn)均和預(yù)期一致，firefox 下點(diǎn)擊能跳出下載文件，但是 ajax 部分報(bào)錯(cuò)，IE 下未測(cè)試。

一開(kāi)始的錯(cuò)誤想法是，跨域?qū)е聢?bào)錯(cuò)。當(dāng)點(diǎn)擊下載鏈接時(shí)，ajax 請(qǐng)求會(huì)以為頁(yè)面即將跳到 href 所指的地址，導(dǎo)致瀏覽器以為該 ajax 跨域。該錯(cuò)誤想法很快被推翻，一是因?yàn)橄冗M(jìn)行 ajax 請(qǐng)求，所以請(qǐng)求瞬間并未跨域；二是并未報(bào)跨域錯(cuò)誤（通常如果是跨域錯(cuò)誤控制臺(tái)會(huì)指出）；三是如下代碼更進(jìn)一步證明了該錯(cuò)誤。

<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>

打開(kāi)該頁(yè)面，隨即進(jìn)行 ajax 請(qǐng)求，一旦點(diǎn)擊了下載按鈕，請(qǐng)求即被中止。如果 a 標(biāo)簽的 href 屬性值不是文件地址，而是用任意的一個(gè) url 替換，如果點(diǎn)擊 a 標(biāo)簽，頁(yè)面會(huì)立即跳轉(zhuǎn)到該標(biāo)簽所指向的地址，頁(yè)面都不存在了，ajax 自然也就中斷了。如果 a 標(biāo)簽指向的是文件地址，在 ff 下是不是也會(huì)被一樣地解析呢（瀏覽器以為要跳到該地址了，而將 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.

從提問(wèn)可以看出，2010 年時(shí) chrome 和 ff 都有類(lèi)似的問(wèn)題，而 chrome 或者說(shuō)是 webkit 內(nèi)核的瀏覽器在之后的版本迭代中修復(fù)了這個(gè)問(wèn)題， ff 則一直將問(wèn)題留到了現(xiàn)在（個(gè)人認(rèn)為這不太合理）。

知道了問(wèn)題的根源，解決方案也就呼之欲出了。

方法一：

最簡(jiǎn)單的方法無(wú)非是給 a 標(biāo)簽加上 target="_blank"，事實(shí)上，通常網(wǎng)頁(yè)都是這么做的，這也是值得肯定的做法。

方法二：

既然 a 標(biāo)簽的默認(rèn)行為會(huì)使得 ajax 請(qǐng)求中斷，那么將 "默認(rèn)行為" 放在請(qǐng)求之前呢？

<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>

方法三：

設(shè)置定時(shí)器使請(qǐng)求延遲，但是因?yàn)?a 標(biāo)簽的默認(rèn)跳轉(zhuǎn)不屬于 Javascript 線程能控制的范圍，所以這個(gè)延遲閾值的設(shè)置非常重要，我本地測(cè)試結(jié)果居然是 2ms（也是萬(wàn)萬(wàn)沒(méi)想到），一般設(shè)置為 100ms 左右就 ok 了。這個(gè)方法不優(yōu)雅，不應(yīng)該使用。

<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>

上述內(nèi)容就是如何解決Ajax請(qǐng)求過(guò)程中下載文件在FireFox瀏覽器下的兼容問(wèn)題，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：如何解決Ajax請(qǐng)求過(guò)程中下載文件在FireFox瀏覽器下的兼容問(wèn)題
文章分享：http://bm7419.com/article0/ijhpoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、App開(kāi)發(fā)、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容