iframe加载时无法获取真实进度，所谓“自适应进度动画”实为视觉适配：用relative容器包裹iframe与绝对定位spinner，通过min()函数和vw单位实现响应式缩放，监听load事件平滑隐藏动画。
iframe 加载时怎么显示自适应进度动画
iframe 本身不提供加载进度（onprogress 事件不存在），所谓“自适应进度”只能是模拟或估算，不能真实反映字节数。真要显示百分比进度，必须放弃纯 iframe 方案，改用 fetch + ReadableStream 手动读取 HTML 内容并计算已加载字节占比——但这样你就没法直接渲染第三方页面（比如 Google 表格），因为跨域限制和 CSP 会拦截脚本执行。
- 浏览器对
<iframe></iframe>只暴露load事件，没有中间状态 -
document.readyState在 iframe 内部不可从父页面直接读取（跨域限制） - 若 iframe 指向同域页面，可通过
iframe.contentDocument监听其内部 DOM 变化，但实际开发中极少可控 - 所谓“自适应”，通常指动画容器随 iframe 尺寸动态缩放，而非进度值自适应
用 CSS 实现视觉上“贴合 iframe 尺寸”的加载动画
真正能落地的“自适应”，是让 loading 动画在 iframe 占位区域里居中、缩放、响应式显示，而不是硬编码宽高。关键在于容器布局和伪元素控制。
- 把
<iframe></iframe>和 loading 元素包进同一个<div class="iframe-container">，设为 <code>position: relative - loading 元素用
position: absolute覆盖整个容器，top: 0; left: 0; width: 100%; height: 100% - spinner 用
::before或<svg></svg>实现，避免额外 DOM 节点；宽度设为min(40px, 10vw)配合transform: scale()做视口适配 - 避免用固定
px宽高，否则在移动端会被裁剪或过小
`.iframe-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 或用 padding-top hack 控制比例 */
}
.iframe-container .spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
}
.iframe-container .spinner::before {
content: "";
width: min(40px, 10vw);
height: min(40px, 10vw);
border: 3px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}`
监听 iframe.load 后隐藏动画并显示内容
这是唯一可靠、无兼容性问题的触发时机。注意：它只在 iframe 文档完全加载（包括所有子资源）后才触发，不是“开始渲染”或“首屏可交互”时间点。
- 不要在
DOMContentLoaded里初始化监听，而应在 iframe 元素插入 DOM 后立即绑定load事件 - 如果 iframe
src是空字符串或about:blank，需先设src再监听，否则事件不会触发 - 避免重复绑定：用
once: true或手动removeEventListener - 隐藏动画推荐用
opacity: 0; pointer-events: none+transition，而非display: none，后者会导致重排
`const iframe = document.getElementById('myIframe');
const spinner = document.querySelector('.iframe-container .spinner');
<p>iframe.addEventListener('load', () => {
spinner.style.opacity = '0';
setTimeout(() => {
spinner.style.display = 'none';
}, 300); // 匹配 transition duration
}, { once: true });</p><p>// 确保 src 设置后再监听（尤其动态插入场景）
iframe.src = '<a href="https://www.php.cn/link/5d0511963228de557cf87c72d2c21582">https://www.php.cn/link/5d0511963228de557cf87c72d2c21582</a>...';`</p>
为什么不用 PerformanceObserver 模拟 iframe 进度
PerformanceObserver 只能监听当前页面发起的资源请求，iframe 内部加载的 script、img、css 属于另一个 browsing context，父页面无法访问其 performance.getEntriesByType('resource') 数据。强行尝试会返回空数组或跨域错误。
- 即使 iframe 同域，也需通过
iframe.contentWindow.performance访问，但该对象在 load 前为null，且多数浏览器会拒绝访问跨 context 的 performance 数据 - 试图用
iframe.contentDocument注入监听脚本？CSP 和 document.write 限制会让它失败率极高 - 所谓“模拟 0%→30%→70%→100%”全是经验估值，不同网络下误差极大，反而损害可信度
真正需要精确进度的场景（如内网系统嵌入大报表），应让后端返回带 Content-Length 的流式 HTML，并用 fetch + ReadableStream 解析；iframe 只适合展示“结果”，不适合承载“过程”。
