v-html仅插入纯HTML字符串，不编译指令、不执行脚本、不解析组件，需过滤XSS风险；dangerouslySetInnerHTML同理危险；静态HTML推荐服务端读取+过滤；iframe最隔离但通信复杂。
Vue 项目里用 v-html 渲染外部 HTML 字符串
直接把 HTML 字符串塞进 Vue 组件，最常用也最容易翻车的方式就是 v-html。它不编译指令、不执行脚本、不解析组件标签，只做纯字符串插入——这既是安全底线，也是能力边界。
常见错误现象：v-html 插入的按钮点不动、@click 失效、自定义组件标签（比如 <my-card></my-card>）原样显示成文字；更隐蔽的是，如果 HTML 来自用户输入，没过滤就上 v-html，XSS 就坐实了。
- 只用于可信来源的 HTML 字符串，比如 CMS 后台配置的富文本内容
- 插入前务必用
DOMPurify.sanitize()过滤（尤其含用户输入时） - 不要指望它能响应式更新子组件或触发 Vue 生命周期——它只是 innerHTML
- 如果 HTML 里有相对路径资源（如
<img src="./logo.png" alt="如何将一个html导入到框架中" >），路径会相对于当前页面 URL，不是组件文件位置
React 中用 dangerouslySetInnerHTML 注入 HTML
React 故意把“插入原始 HTML”这件事起名叫 dangerouslySetInnerHTML，不是为了吓人，是提醒你：这个 API 绕过了所有 React 的安全机制和虚拟 DOM 管理。
使用场景很窄：比如从 Markdown 解析器拿到已转义的 HTML 片段，或渲染服务端预生成的静态内容块。一旦里面混入未过滤的用户输入，<script>alert(1)</script> 就真弹出来了。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 必须用对象形式传值：
{__html: rawHtml}，写成dangerouslySetInnerHTML={rawHtml}会报错 - 里面的事件监听器（
onclick）、内联脚本、<style></style>标签全部失效或被浏览器忽略（现代浏览器策略限制） - 如果 HTML 含 CSS 类名，且你用 CSS Modules，这些类名不会自动加哈希，样式对不上得手动处理
Next.js / Nuxt 中静态导入 HTML 文件（非组件）
想把一个独立的 report.html 文件整个嵌进页面？别用 fetch 拿字符串再 v-html —— 构建时就能搞定的事，运行时硬扛反而容易出 CORS 或路径问题。
Next.js（App Router）下，可以用 readFileSync 在服务端组件里同步读取，前提是 HTML 文件放在 app/ 目录外（如 public/report.html 不行，要放 src/app/report.html 并设为 "use client" 的反面：服务端组件）。
- Next.js 中
public/下的 HTML 不能直接 import，会被当成静态资源，返回 404 或下载 - Nuxt 3 推荐用
useFetch+transform预处理，但注意 SSR 时fetch走 Node 环境，路径要用绝对路径或file:// - 读出来的 HTML 字符串仍需走
v-html或dangerouslySetInnerHTML，过滤步骤不能省
iframe 嵌入 HTML 文件（最隔离，也最僵硬）
当 HTML 有自己完整的 JS、CSS、路由甚至 history 状态，又不想污染主应用上下文，iframe 是事实标准方案。但它不是“导入”，是“并列加载”。
典型踩坑：父页面改了主题色，iframe 里完全无感；iframe 页面调 window.parent.location.href 跳转，可能被浏览器拦截；iOS Safari 对跨域 iframe 的 localStorage 访问更严格。
- 本地开发时，Chrome 可能因
file://协议拒绝加载 iframe，得用npm run dev启服务再访问 - 同源 iframe 可用
iframe.contentWindow通信，但需手动绑定postMessage，别直接操作 DOM - 高度自适应难：iframe 默认固定高，内容变长会出滚动条；要用
ResizeObserver+postMessage反向通知父页调整
真正麻烦的从来不是“怎么塞进去”，而是“塞进去之后谁管它的生命周期、样式作用域、脚本执行权限和跨域通信”。选哪种方式，取决于你愿不愿意为那段 HTML 承担后续所有维护成本。
