iframe证书过期时浏览器不触发onload或onerror，只能通过5秒超时+100ms轮询contentDocument/readyState并捕获SecurityError来间接判断，配合明确提示文案和跳转链接引导用户手动处理。
iframe证书过期时浏览器根本不会触发onload或onerror
这不是前端能直接捕获的错误——现代浏览器（Chrome/Firefox/Safari）对HTTPS证书问题（如过期、域名不匹配、自签名）会直接拦截整个加载过程，iframe元素既不会触发onload，也不会触发onerror，甚至contentDocument始终为null。你无法靠监听事件“发现”它失败了。
只能用超时 + 状态轮询来间接判断
可行思路是：设一个合理超时（比如5秒），期间反复检查iframe.contentDocument是否可读、是否有readyState === "complete"，或者尝试读取iframe.contentWindow.location.href（注意跨域会抛SecurityError，需try/catch）。
- 超时时间建议设为
5000ms：太短容易误判（尤其弱网），太长影响体验 - 轮询间隔用
100ms：比setTimeout链更可控，避免堆栈过深 - 必须
catch所有SecurityError：跨域或证书失败都会触发，这是你唯一的线索 - 不要依赖
iframe.readyState：该属性在多数浏览器中对iframe无效，始终返回"loading"
const iframe = document.getElementById('my-iframe');
let timeoutId;
let checked = false;
const checkLoad = () => {
if (checked) return;
try {
const doc = iframe.contentDocument;
if (doc && doc.readyState === 'complete') {
clearTimeout(timeoutId);
console.log('loaded OK');
return;
}
} catch (e) {
if (e.name === 'SecurityError') {
clearTimeout(timeoutId);
showCertificateError();
checked = true;
return;
}
}
};
timeoutId = setTimeout(() => {
if (!checked) {
showCertificateError();
checked = true;
}
}, 5000);
const poll = setInterval(() => {
checkLoad();
if (checked) clearInterval(poll);
}, 100);
提示文案要明确区分“证书问题”和“普通加载失败”
用户看到“加载失败”会以为是网络或服务端问题，但证书过期是**客户端可感知、且用户可能自行解决的问题**（比如手动访问目标URL，点击“继续前往…”）。提示里必须包含可操作信息：
- 避免写“页面加载失败”——太模糊
- 推荐文案：“无法安全加载此内容：目标网站的SSL证书已过期或不受信任。您可尝试在新标签页中打开该链接，检查浏览器警告并选择继续访问。”
- 附一个
<a href="..." target="_blank">链接：让用户跳出去手动处理，这是唯一绕过证书拦截的方式 - 不自动重试或刷新：证书问题不会因重试消失
服务端代理是更可靠的长期方案
如果你控制后端，最彻底的解法是让后端代理目标页面（比如/proxy?url=https://xxx.com），由服务端完成HTTPS请求并返回HTML。这样前端加载的是自己域名下的资源，完全规避证书校验。
立即学习“前端免费学习笔记（深入）”；
- 优点：100% 绕过浏览器证书限制，提示逻辑退化为普通HTTP错误处理
- 缺点：需后端支持CORS/反向代理，且要注意目标站的
X-Frame-Options或Content-Security-Policy是否允许被嵌入 - 注意：代理不能简单
fetch后直接document.write，需重写相对路径、处理cookie、注入base标签等，否则JS/CSS会404
证书问题本质是浏览器安全策略，前端能做的只是尽力探测和友好提示；真正可靠的做法，要么引导用户手动介入，要么把风险转移到服务端。
