iframe.onload是唯一可信的同步时机，必须先绑定onload再设置src或提交表单；动态创建需先appendChild再监听；跨域时需postMessage配合超时兜底；Chrome92+要求iframe必须插入DOM才允许提交。
iframe.onload 是唯一可信的隐藏时机
直接监听 iframe.onload，不是表单的 submit、不是 click、也不是靠 setTimeout 猜时间。浏览器只有在 iframe 内容（HTML 文档）完全加载并解析完毕后，才会触发这个事件——它天然覆盖了图片、脚本、样式等所有子资源加载完成的状态。
常见错误是：表单提交后立刻去读 iframe.contentDocument，结果返回 null 或报 SecurityError。这不是代码写错，是时机错了。
- 必须先绑定
onload回调，再设置src或触发表单提交；否则可能错过首次加载 - 动态创建的
iframe要先document.body.appendChild(iframe)，再绑定事件 - 若服务端返回空响应或重定向，
onload仍会触发，但contentDocument可能不可用，需加try/catch
隐藏 loading 的安全写法：display: none + 存在性检查
别用 document.body.removeChild()，容易因 DOM 已移除或节点不存在而报错；也别依赖 visibility: hidden，它仍占布局空间，且部分旧版 IE 对隐藏 iframe 的加载有异常。
推荐统一用 display: none 控制可见性，并在操作前确认元素存在：
立即学习“前端免费学习笔记（深入）”；
- 给 loading 元素设固定 ID，比如
id="loading-iframe" - 在
iframe.onload回调里执行：const el = document.getElementById('loading-iframe'); if (el) el.style.display = 'none'; - 避免多个地方重复操作同一 loading 元素，可加标记位如
el.dataset.hidden = 'true'防重复隐藏
跨域 iframe 下 loading 无法自动隐藏怎么办
如果 iframe 加载的是跨域资源（如第三方页面），onload 仍会触发，但你无法读取其 contentDocument，也无法判断内容是否真“加载成功”。此时不能依赖文档状态，得换思路：
- 服务端响应中主动注入脚本：
<script>window.parent.postMessage({type: 'iframe-loaded'}, '*')</script> - 父页监听
message事件，用event.source === iframe.contentWindow校验来源 - 同时设一个兜底超时：
setTimeout(() => { hideLoading(); }, 15000)，防止因网络或服务端问题卡死 - 不要轮询
iframe.contentWindow.location—— 跨域直接抛错，同域也可能被重定向清空
Chrome 92+ 隐藏 iframe 提交失败的兼容处理
Chrome 92 起对长期 display: none 的 iframe 表单提交做了限制：若 iframe 从未被插入过 DOM，或长时间不可见，form.submit() 可能静默失败，控制台报 Failed to execute 'submit' on 'HTMLFormElement': The form owner is not in a Document。
这不是 bug，是浏览器防滥用策略。应对方式很实在：
-
iframe必须插入 DOM（哪怕只是临时 append 到body），不能只声明不挂载 - 避免用
visibility: hidden或opacity: 0替代display: none，前者不满足“不可见”条件，反而可能触发更严格检查 - 如果必须动态创建，优先用
document.createElement('iframe')+appendChild+ 绑定onload+ 设置name+ 再提交，顺序不能乱
真正容易被忽略的点是：iframe 的生命周期和 DOM 存在性绑定比想象中紧，它不是个纯后台通道——一旦脱离 document，很多行为就不可靠了。
