react添加/嵌入 iframe
<p> </p><p>react 嵌入 iframe 主要是为了隔离富文本，避免跟宿主环境的样式、变量等造成污染。</p>
<p> </p>
<p>情况1：后端返回一个完整的网页，前端直接 `<iframe src="$url"></iframe>` 就可以了。</p>
<p>情况2：后端返回内容不可控 (比如以下例子)。</p>
<p> </p>
<p>用法：</p>
<p>index.tsx:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">export default function Iframe () {
const contentIFrameRef = useRef<HTMLIFrameElement>(null)
const = useState(0)
useEffect(() => {
$api.xxxxx(xxx)
.then((res) => {
const iframe: HTMLIFrameElement | null = contentIFrameRef.current
if (iframe && iframe.contentWindow) {
const iframeDocument = iframe.contentWindow.document
// 写入内容（这里举例的 iframe 内容是请求接口后返回 html，也就是 res，比如 res="<h1>标题</h1>"）
iframeDocument.write(res)
// 如果需要 css，写入 css，此处的 css 是写在根目录里（与 index.html 同级）
if (!(iframeDocument.getElementsByTagName('link'))) {
const link = iframeDocument.createElement('link')
link.href = process.env.PUBLIC_URL + '/template.css'
link.rel = 'stylesheet'
link.type = 'text/css'
iframeDocument.head.appendChild(link)
}
// 这里动态计算 iframe 的 height,这里举例 300px
setIframeHeight(300)
}
})
}, [])
return (
<iframe
ref={contentIFrameRef}
title="iframe"
style={{ width: 1120, border: 0, height: <strong>iframeHeight</strong> }}
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
scrolling="auto"
></iframe>
)
}
</pre>
</div>
<p> </p>
<p>如果后端把 iframe 的内容放在服务端，返给前端一个 url，可以直接 <iframe src={Url}></iframe></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/zhangym118/p/13255043.html 感谢楼主的分享！这个iframe隔离富文本的思路确实很实用，特别是在处理用户输入的HTML内容时。想请教几个问题：
1. 关于安全性：使用`iframeDocument.write()`直接写入HTML内容，会不会存在XSS风险？有没有做什么过滤处理？
2. 关于性能：如果iframe内容比较复杂，每次请求都重新write一次会不会有性能问题？有没有考虑过缓存或者其他优化方案？
3. 关于通信：iframe内部如果需要和父页面通信（比如点击事件、提交表单等），一般是怎么处理的？
4. 关于样式隔离：除了link引入CSS，是否还需要考虑inline style的隔离？比如有些富文本自带style属性可能会影响外部布局。
路过学习，蹲一个楼主的解答~
頁:
[1]