通过iframe下载文件，怎么判断文件是否下载成功？
文章目录
- 概要
- 问题思考
- 问题解决方案
- 技术细节
- 小结
概要
最近在客户现场开发，碰到客户反馈一个问题，他用tab去承接下载文件的接口，假如文件不存在，会导致tab页面关闭不了
问题思考
下载接口用tab承接，设计思路就不对
虽然tab页面也是通过iframe嵌套的，但是点击那个tab页面的关闭按钮时，会导致tab组件关闭事件里面报错，导致关闭不了。
问题解决方案
新创建一个iframe来承接下载接口，通过iframe加载完成的状态来控制即可。
// 假设 downloadPageUrl 是下载页面的 URL
let downloadPageUrl = "https://example.com/download";// 创建一个隐藏的 iframe 元素
let hiddenIframe = document.createElement('iframe');
hiddenIframe.style.display = 'none';// 将 iframe 加载到下载页面 URL
hiddenIframe.src = downloadPageUrl;// 将 iframe 添加到页面中
document.body.appendChild(hiddenIframe);// 通过iframe的加载状态进行控制
let iframeDoc = hiddenIframe.contentDocument;
if(iframeDoc && (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive')){console.log("文件存在！");
}else{alert("文件不存在！");
}
技术细节
readyState很重要，下面详细说说。
readyState 属性返回当前文档的状态
语法：document.readyState
- UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
- LOADING：加载程序进行中，但文件尚未开始解析。
- LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
- INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。
- COMPLETED：文件已完全加载，代表加载成功。
小结
最终通过上述方案解决了客户的问题，做下总结，方便以后遇到可快速解决。