概要

最近在客户现场开发，碰到客户反馈一个问题，他用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

1. UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
2. LOADING：加载程序进行中，但文件尚未开始解析。
3. LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
4. INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。
5. COMPLETED：文件已完全加载，代表加载成功。

小结

最终通过上述方案解决了客户的问题，做下总结，方便以后遇到可快速解决。