应使用 wrapper 容器控制显隐并组合监听 onload 事件、轮询 readystate 及超时兜底：先设 wrapper.opacity=0，加载就绪（contentdocument 可访问且 readystate==='complete'）或超时后加 loaded 类过渡显示。
iframe 加载完成前如何避免白屏闪动
直接设置 iframe 的 opacity: 0 再用 CSS 动画过渡，大概率会失败——因为 iframe 内容加载期间无法触发 load 事件（尤其跨域时），且初始渲染时机不可控。必须等 iframe.contentDocument 可访问、且其 readyState === 'complete' 才算真正就绪。
监听 iframe 加载完成的可靠方式
不能只依赖 iframe.onload：它在某些浏览器中对跨域 iframe 不触发，或在资源缓存时过早触发（DOM 未 ready）。应组合监听：
-
iframe.onload作为第一层信号（同域下较准） - 定时轮询
iframe.contentDocument?.readyState（跨域时仅能读取该属性，不报错） - 超时兜底（比如 10 秒后强制显示，防止卡死）
示例逻辑：
const iframe = document.querySelector('iframe');
iframe.style.opacity = '0';
iframe.style.transition = 'opacity 0.3s ease-out';
const checkReady = () => {
try {
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (doc && doc.readyState === 'complete') {
iframe.style.opacity = '1';
clearInterval(timer);
}
} catch (e) {
// 跨域时捕获 SecurityError，继续轮询
}
};
const timer = setInterval(checkReady, 100);
iframe.addEventListener('load', checkReady); // 同域增强触发
CSS 动画需绕开 iframe 自身的 opacity 继承问题
给 iframe 直接加 opacity 在部分旧版 Safari 和 iOS WebKit 中会导致子页面渲染异常（文字模糊、滚动卡顿）。更稳妥的做法是用 wrapper 容器控制显隐：
- 外层
<div class="iframe-wrapper"> 设为 <code>opacity: 0，内嵌iframe不设透明度 - 动画作用于 wrapper，避免干扰 iframe 渲染管线
- 确保 wrapper 设置
display: block和明确宽高，否则动画可能失效
对应 CSS：
.iframe-wrapper {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.iframe-wrapper.loaded {
opacity: 1;
}
跨域 iframe 的加载状态判断有硬限制
当 iframe 指向不同源时，JavaScript 无法读取其 contentDocument 内容，但以下属性仍可安全访问：
-
iframe.contentWindow?.document?.readyState（返回字符串，但可能始终为 'loading'） -
iframe.contentWindow?.location.href（仅当同协议+同端口时部分可读，多数情况抛错）
因此，跨域场景下只能依赖 onload 事件 + 合理超时。如果业务允许，建议服务端在 iframe 页面末尾注入一段 window.parent.postMessage('loaded', '*')，由父页监听并触发显隐——这是目前最可控的跨域通信方案。
别指望靠 CSS @keyframes 或 animation 单独驱动 iframe 显隐，加载时机和 DOM 可访问性才是关键门槛。
