HTML页面内容如何在网页中显示？

本文深入探讨了前端如何安全、高效地显示接口返回的HTML内容，从直接使用innerHTML的风险警示，到iframe嵌入、srcdoc内联渲染、Blob URL降级、DOMParser局部解析等多场景解决方案，全面覆盖同源与跨域、现代浏览器与IE兼容、富文本片段与完整页面的不同需求；同时强调XSS防护、脚本执行陷阱、框架集成隐患（如dangerouslySetInnerHTML和v-html的滥用）以及服务端协同（CORS、frame-ancestors、内容过滤）等关键实践细节，直击“显示HTML”背后真正棘手的安全、性能与协作问题。

用 iframe 直接嵌入最省事，但要注意同源和安全限制

如果后端返回的是完整 HTML 字符串（比如 fetch 拿到的是一段含 ... 的文本），直接写进 innerHTML 会丢掉 script、style 和事件绑定，也不执行 JS。最稳妥的显示方式是用 iframe。

实操建议：

• 动态创建 iframe，设 srcdoc 属性填入 HTML 字符串（支持同源内联渲染）
• 若接口跨域，且返回的是真实 HTML 页面（不是字符串），可直接设 src 为接口 URL，但需后端配 Access-Control-Allow-Origin 或允许 iframe 嵌入（X-Frame-Options / Content-Security-Policy: frame-ancestors）
• srcdoc 不支持 IE，如需兼容 IE，得降级用 Blob + URL.createObjectURL 构造 blob URL

DOMParser 解析 HTML 字符串再挂载，适合局部渲染

当只需要显示 HTML 片段（比如一段富文本内容），且不依赖原页面的 JS 或全局样式时，DOMParser 是更轻量的选择——它能把字符串转成真实的 DOM 节点，保留结构和属性。

常见错误现象：

• 直接 el.innerHTML = htmlStr 后，