srcdoc与src组合是唯一可靠fallback方案：现代浏览器优先用srcdoc，ie退回到src指向的真实html文件；需包裹完整文档结构、转义双引号、显式设置sandbox属性。
srcdoc + src 组合是唯一可靠 fallback 方案
不支持 srcdoc 的浏览器（主要是 IE 全系）会直接忽略该属性，既不报错也不尝试补全，结果就是 iframe 空白。你不能靠 JS 特性检测后动态写入，因为 DOM 已渲染完成，srcdoc 属性一旦被忽略就不可挽回。
正确做法是：**同时声明 src 和 srcdoc**，让现代浏览器自动优先使用 srcdoc，IE 则退回到 src 指向的静态 HTML 文件。
-
src必须指向一个真实可访问的 HTML 文件（如/fallback-preview.html），不能是空字符串或about:blank - 该 fallback 文件内容应与你原本想塞进
srcdoc的结构一致，比如也含<p>Loading...</p>，避免视觉跳变 - 不要试图用
data:text/html,URL 做 fallback —— IE 对 data URL 的 iframe 支持极差，且长度受限、编码易出错
Vue/React 中动态拼接 srcdoc 时必须预处理结构
框架里常从 API 拿到纯 HTML 片段（如富文本内容），直接插进 srcdoc 会失败：Safari 空白、Chrome 渲染异常。因为 srcdoc 要求的是完整文档，不是片段。
你需要在赋值前做最小结构包裹，且避开引号冲突：
- 用单引号包裹整个
srcdoc属性值：srcdoc='<title>Preview</title>${sanitizedHtml}' - 确保
sanitizedHtml中所有双引号已转义为"，否则外层解析中断 - 若内容含内联
<script></script>或<style></style>，它们必须合法嵌套在或内，不能游离在外 - 别依赖框架的 v-html 或 dangerouslySetInnerHTML —— 它们不负责补全 DOCTYPE 或 html 结构
sandbox 属性必须显式设置，且 IE 不识别但不影响 fallback
sandbox 不是可选项，是安全底线。没它的话，哪怕你拼的是自己写的 HTML，只要混入用户输入（比如评论预览），XSS 就可能触发。
兼容性上它很友好：
- IE 完全不识别
sandbox，但也不会报错；它本来就不支持srcdoc，所以走的是srcfallback 路径，sandbox 对它无影响 - 现代浏览器中，
sandbox=""是最保守起点；需要脚本时只加allow-scripts，绝不要加allow-same-origin - 注意：sandbox 为空字符串（
sandbox=""）和未声明 sandbox 效果完全不同 —— 前者禁用全部能力，后者等同于完全开放
动态更新 srcdoc 会重载上下文，别当成“局部刷新”
执行 iframe.srcdoc = newString 不是更新 DOM，而是销毁并重建整个 iframe 浏览上下文：所有定时器、事件监听器、console 输出、JS 变量全部清空。
这意味着：
- 高频更新（如每键触发的 Markdown 预览）会导致明显卡顿和状态丢失
- 如果新内容含
<script></script>，它会在全新 window 对象里执行，无法访问旧上下文里的变量 - 真要保留状态，得用
iframe.contentDocument.write()+document.close()，但这要求同源且无sandbox限制，安全风险陡增 - 更稳妥的做法：把交互逻辑移到父页面，通过
window.parent.postMessage()通信，让 iframe 只负责渲染
最容易被忽略的一点：即使你写了完整的 ，只要漏了 <title></title>，某些旧版 Safari 仍可能拒绝渲染 —— 它不是规范强制项，却是 Safari 的实际硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
