問題
當使用iframe作為文件下載的載體時，如何知道文件已經下載完畢。現有的iframe的onLoad方法具有兼容性問題，在chrome、IE下無法監聽onLoad事件監聽文件下載完畢，因為onLoad事件本身也是對iframe中的html結構的加載進度監聽。
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);
當chrome、IE下時，如果HTTP文件頭中包含Content-disposition: attachment；即下載文件的鏈接的話，不會觸發這個事件onLoad事件。
這里說一下Content-disposition：
Content-disposition 是 MIME 協議的擴展，MIME 協議指示 MIME 用戶代理如何顯示附加的文件。Content-disposition其實可以控制用戶請求所得的內容存為一個文件的時候提供一個默認的文件名，文件直接在瀏覽器上顯示或者在訪問時彈出文件下載對話框。 Content-Disposition為屬性名disposition-type是以什么方式下載，如attachment為以附件方式下載disposition-parm為默認保存時的文件名服務端向客戶端游覽器發送文件時，如果是瀏覽器支持的文件類型，一般會默認使用瀏覽器打開，比如txt、jpg等，會直接在瀏覽器中顯示 注意事項： 1.當代碼里面使用Content-Disposition來確保瀏覽器彈出下載對話框的時候。 response.addHeader(‘Content-Disposition’, ‘attachment’);一定要確保沒有做過關於禁止瀏覽器緩存的操作。 代碼如下: response.setHeader(‘Pragma’, ‘No-cache’); response.setHeader(‘Cache-Control’, ‘No-cache’); response.setDateHeader(‘Expires’, 0); 不然會發現下載功能在opera和firefox里面好好的沒問題，在IE下面就是不行
解決思路一：利用cookie
后端將文件下載進度放在cookie中，通過輪詢cookie的方式，對文件下載進度進行獲取，判斷文件是否已經下載完畢。 缺陷： 1、需要后端配合 2、如果客戶端禁用了cookie，則該方案完全失效；在無痕瀏覽模式下，讀取cookie，甚至代碼報錯。
解決思路二：添加header配置
// 不讓瀏覽器自動檢測文件類型
// 說明資料：http://drops.wooyun.org/tips/1166 response.addHeader('X-Content-Type-Options', 'nosniff'); // 提示瀏覽器不讓其在frame或iframe中加載資源的文件內容 // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options response.addHeader('X-Frame-Options', 'deny');
但是在chorome v58版本將header的X-Frame-Options設為deny會報錯。並且下載的時候網絡連接會出現失敗。
解決思路三：輪詢監聽readyState
定時器輪詢監聽readyState的狀態，如果是 complete 或者 interactive 說明文件加載完成。
var timer = setInterval(function () { iframe = document.getElementById('iframedownload'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // Check if loading is complete if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') { loadingOff(); clearInterval(timer); return; } }, 4000);
該種方法比較好，因為不需要后端進行配合，且不依賴與cookie等變量帶來的問題，且能實現我們的需求。