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，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须用对象形式传值：
{__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 承担后续所有维护成本。
