問題

當(dāng)使用iframe作為文件下載的載體時(shí)，如何知道文件已經(jīng)下載完畢?，F(xiàn)有的iframe的onLoad方法具有兼容性問題，在chrome、IE下無法監(jiān)聽onLoad事件監(jiān)聽文件下載完畢，因?yàn)閛nLoad事件本身也是對iframe中的html結(jié)構(gòu)的加載進(jìn)度監(jiān)聽。

var url = 'http://www.example.com/file.zip'; var iframe = document.createElement('iframe'); iframe.src = url; iframe.style.display = 'none'; iframe.onload = function() {console.debug('start downloading...');document.body.removeAttribute(iframe); } document.body.appendChild(iframe);

當(dāng)chrome、IE下時(shí)，如果HTTP文件頭中包含Content-disposition: attachment；即下載文件的鏈接的話，不會(huì)觸發(fā)這個(gè)事件onLoad事件。

這里說一下Content-disposition：

Content-disposition 是 MIME 協(xié)議的擴(kuò)展，MIME 協(xié)議指示 MIME 用戶代理如何顯示附加的文件。Content-disposition其實(shí)可以控制用戶請求所得的內(nèi)容存為一個(gè)文件的時(shí)候提供一個(gè)默認(rèn)的文件名，文件直接在瀏覽器上顯示或者在訪問時(shí)彈出文件下載對話框。 Content-Disposition為屬性名disposition-type是以什么方式下載，如attachment為以附件方式下載disposition-parm為默認(rèn)保存時(shí)的文件名服務(wù)端向客戶端游覽器發(fā)送文件時(shí)，如果是瀏覽器支持的文件類型，一般會(huì)默認(rèn)使用瀏覽器打開，比如txt、jpg等，會(huì)直接在瀏覽器中顯示 注意事項(xiàng)： 1.當(dāng)代碼里面使用Content-Disposition來確保瀏覽器彈出下載對話框的時(shí)候。 response.addHeader(‘Content-Disposition’, ‘a(chǎn)ttachment’);一定要確保沒有做過關(guān)于禁止瀏覽器緩存的操作。 代碼如下: response.setHeader(‘Pragma’, ‘No-cache’); response.setHeader(‘Cache-Control’, ‘No-cache’); response.setDateHeader(‘Expires’, 0); 不然會(huì)發(fā)現(xiàn)下載功能在opera和firefox里面好好的沒問題，在IE下面就是不行

解決思路一：利用cookie

后端將文件下載進(jìn)度放在cookie中，通過輪詢cookie的方式，對文件下載進(jìn)度進(jìn)行獲取，判斷文件是否已經(jīng)下載完畢。 缺陷： 1、需要后端配合 2、如果客戶端禁用了cookie，則該方案完全失效；在無痕瀏覽模式下，讀取cookie，甚至代碼報(bào)錯(cuò)。

解決思路二：添加header配置

// 不讓瀏覽器自動(dòng)檢測文件類型 // 說明資料：http://drops.wooyun.org/tips/1166 response.addHeader('X-Content-Type-Options', 'nosniff'); // 提示瀏覽器不讓其在frame或iframe中加載資源的文件內(nèi)容 // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options response.addHeader('X-Frame-Options', 'deny');

但是在chorome v58版本將header的X-Frame-Options設(shè)為deny會(huì)報(bào)錯(cuò)。并且下載的時(shí)候網(wǎng)絡(luò)連接會(huì)出現(xiàn)失敗。

解決思路三：輪詢監(jiān)聽readyState

定時(shí)器輪詢監(jiān)聽readyState的狀態(tài)，如果是 complete 或者 interactive 說明文件加載完成。

var timer = setInterval(function () {iframe = document.getElementById('iframedownload');var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;// Check if loading is completeif (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {loadingOff();clearInterval(timer);return;} }, 4000);

該種方法比較好，因?yàn)椴恍枰蠖诉M(jìn)行配合，且不依賴與cookie等變量帶來的問題，且能實(shí)現(xiàn)我們的需求。

總結(jié)

以上是生活随笔為你收集整理的如何知道iframe文件下载download完成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。