srcdoc动态更新会彻底销毁JS上下文，所有定时器、事件监听器、全局变量均清空；必须提供完整HTML文档结构并内联CSS/JS，配sandbox防XSS，IE不支持需fallback。
srcdoc 里写复杂 JS 会直接失效，除非你重写整个执行环境
srcdoc 不是“把 JS 丢进去就能跑”的容器，它每次赋值都重建 iframe 上下文——所有定时器、事件监听器、全局变量全清空。你写的 setInterval、addEventListener、class 实例，在下一次 srcdoc = newHtml 后就彻底消失，控制台里甚至看不到残留引用。
常见错误现象：
– 点击按钮第一次计数 +1，第二次又从 0 开始
– fetch 请求发出去了，但响应回调没执行（上下文已销毁）
– 控制台报 ReferenceError: xxx is not defined，但代码明明写了
- JS 必须完整内联在
<body>底部或包裹进DOMContentLoaded，不能依赖外部模块或父页面变量 - 不要用
document.write()或尝试修改contentDocument—— srcdoc 加载后文档锁定，强行写入会静默失败 - 若需状态持久（比如表单输入未提交前不丢失），别用 srcdoc 动态更新，改用同源 iframe 的
contentDocument.write()+document.close() - 复杂逻辑建议拆成纯函数 + JSON 配置，通过
postMessage和父页通信，而不是在 srcdoc 里硬塞一整套 MVVM
sandbox="allow-scripts" 是底线，但加了也不等于 JS 安全运行
只加 sandbox="allow-scripts" 还不够：它允许脚本执行，但默认禁用 localStorage、fetch、WebSocket、top.location 等关键 API。很多“复杂 JS”一跑就卡在 localStorage.getItem 报错或 fetch 被拦截。
使用场景判断：
– 展示带交互的组件预览（如按钮、开关、进度条）→ sandbox="allow-scripts" 足够
– 需要调用后端接口或读写本地存储 → 改用真实页面或服务端渲染，srcdoc 不适合
– 想操作父页面 DOM 或调用 window.api → 不可能，必须走 postMessage
立即学习“前端免费学习笔记（深入）”；
- 绝不能加
allow-same-origin—— 一旦开启，恶意脚本可通过iframe.contentDocument直接读取父页 DOM，哪怕内容是你自己拼的，混入用户输入就崩 - 需要跨 frame 通信时，父页监听
message，srcdoc 内脚本用window.parent.postMessage()，双方都要校验event.origin - Chrome DevTools 里看到的 console.log 是旧上下文输出，新脚本日志要重新打点，否则你以为它没执行
动态更新 srcdoc 的性能代价远超预期
每改一次 srcdoc，浏览器就销毁旧 iframe、新建一个、解析 HTML、执行 JS、触发 layout —— 这不是 diff 更新，是整页 reload。高频操作（比如 Markdown 实时预览每敲一个字就更新）会导致卡顿、内存泄漏、DevTools 崩溃。
参数差异对比：
– srcdoc = htmlStr：强制重载，JS 上下文归零，适合低频、静态或一次性预览
– iframe.contentDocument.body.innerHTML = htmlStr：轻量更新，但要求同源 + 无 sandbox 限制，XSS 风险陡增
– src="data:text/html;base64,..."：绕过 srcdoc 兼容性问题，但 URL 长度受限（部分浏览器 ≤2MB），且仍触发重载
- Logseq、Obsidian 等笔记工具中做 HTML 预览，推荐用固定结构 + class 切换，而非每次重写 srcdoc
- Vue/React 项目里渲染后端返回的富文本 HTML，优先考虑
v-html+ CSP 白名单，srcdoc 仅用于强隔离场景（如广告、第三方支付页） - IE 完全不识别 srcdoc，fallback 必须设
src（比如指向一个兜底的空 HTML 文件），否则就是空白 iframe
最易被忽略的细节：引号转义和文档结构完整性
写 srcdoc='<div onclick="alert(1)">click</div>' 看似没问题，但实际会被 HTML 解析器截断为 srcdoc='<div onclick="，后面全丢。这不是 JS 错误，是属性值提前闭合导致 iframe 空白，控制台还不报错。
常见错误现象：
– iframe 显示为空白，检查控制台无报错
– Safari 完全不渲染，Chrome 却显示部分内容（结构缺失导致解析行为不一致）
– CSS 样式不生效，发现 <style> 标签被当成文本节点
- 外层属性统一用单引号：
srcdoc=" < html><html><headyoujiankuohaophp cn<title>x<> <li>必须含 <code><!DOCTYPE html>、<html>、<head>、<body>，缺一不可；<title>推荐带上，旧版 Safari 可能拒渲 - 所有双引号在内联字符串中必须转义为
"，或改用单引号（style='color:red'） - 禁止
<script src="xxx.js"></script>或<link href="xxx.css">—— 外部资源一律不加载，连相对路径都无效
复杂 JS 逻辑和 srcdoc 天然相斥。它适合的是「小而隔离」的展示型场景，不是微型应用容器。真要跑复杂脚本，就该换技术选型，而不是在 srcdoc 里堆 try-catch 和 postMessage 补丁。
