iframe是唯一被html5标准保留的原生跨域隔离方案，因其提供独立浏览上下文（window、document、location），确保脚本执行、资源解析、api行为均按自身origin进行，而fetch+innerhtml等方式无法实现真正隔离，易触发csp拦截或安全错误。
iframe 是目前唯一被 HTML5 标准保留、原生支持跨域隔离的嵌入方案，能安全加载第三方页面。其他方式（比如 fetch + innerHTML、document.write 或 Shadow DOM 注入）无法真正隔离执行环境，且受同源策略或 CSP 限制，容易触发安全错误或内容被拦截。
为什么用 iframe 而不是 fetch 渲染 HTML 字符串
直接把远程 HTML 插入 div.innerHTML 看似简单，但实际会出问题：
- 脚本不会执行（除非手动
eval，极不安全） - CSS 和相对路径（如
./style.css）在父页面上下文中解析失败 - 目标页面里的
window.parent、document.cookie、localStorage行为错乱 - 若目标页含表单、
history.pushState或 Web Components，行为不可控 - 违反 CSP 的
script-src或default-src策略，直接被浏览器阻止
iframe 则天然拥有独立的浏览上下文（Window、Document、Location），所有资源按自身 origin 解析，这是它不可替代的核心价值。
src 加载失败时怎么排查
常见现象：空白区域、控制台静默无报错、或只显示 fallback 文本。原因往往不是代码写错，而是服务端或网络层拦截：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 目标 URL 返回 404 / 500，但
iframe不抛 JS 错误，只留空 - 目标服务器没配
Access-Control-Allow-Origin: *—— 实际上跨域加载iframe并不需要这个响应头；该头只影响fetch或XMLHttpRequest，iframe的加载本身不受其限制 - 目标页启用了
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，这是真正会阻断嵌入的响应头 - URL 协议不一致（如父页是
https://，子页用http://），现代浏览器会直接拒绝加载 - 某些 CDN 或 WAF（如 Cloudflare）默认屏蔽 iframe 嵌入，需在后台开启 “Allow framing”
动态设置 src 时要注意什么
用 JS 修改 iframe.src 很常见，但几个细节容易踩坑：
- 不要在
iframe元素已存在且已有内容时，反复设空字符串src=""—— 这会触发一次无效导航，可能清空当前文档并触发load事件，干扰状态判断 - 带参数的 URL 需手动编码，尤其含中文或特殊符号：
encodeURIComponent("张三")，否则src="page.html?name=张三"可能被截断或 400 - Vue/React 中绑定
:src时，确保变量非 undefined 或 null，否则渲染出src="null"，导致请求/null - 加载中想加 loading 状态？不能靠
iframe.onload判断完成 —— 它只在文档解析完成时触发，不保证图片、JS、字体等资源加载完毕；更可靠的是监听子页面主动发来的postMessage
样式和尺寸控制的实用技巧
iframe 默认有边框、滚动条、固定宽高，不处理会影响体验：
- 去边框统一用 CSS：
border: none；frameborder="0"是过时属性，HTML5 已不推荐 - 隐藏滚动条：
overflow: hidden必须加在iframe的父容器上，而不是iframe自身（它不响应overflow） - 高度自适应？纯 CSS 无法实现（因子页面高度不可知），可行方案只有：
– 子页通过postMessage主动通知父页当前document.body.scrollHeight
– 父页监听消息并调整iframe.style.height
– 配合resizeObserver监听子页 body 尺寸变化（需双方配合） - 移动端注意
width="100%"有效，但height="100%"无效 —— 父容器必须有明确高度（如height: 100vh），否则撑不开
跨域场景下，子页无法读取父页 DOM，父页也无法直接操作子页样式，所有协同都得靠 postMessage + 严格的消息校验，这点常被忽略。
