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 必须完整内联在 底部或包裹进 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 崩溃。

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

参数差异对比：
– 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='

click

' 看似没问题，但实际会被 HTML 解析器截断为 srcdoc='

必须含 、、、，缺一不可； 推荐带上，旧版 Safari 可能拒渲

所有双引号在内联字符串中必须转义为 "，或改用单引号（style='color:red'）

禁止 <script src="xxx.js"></script> 或 —— 外部资源一律不加载，连相对路径都无效

复杂 JS 逻辑和 srcdoc 天然相斥。它适合的是「小而隔离」的展示型场景，不是微型应用容器。真要跑复杂脚本，就该换技术选型，而不是在 srcdoc 里堆 try-catch 和 postMessage 补丁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！