在 React 应用程序中显示 iframe
-
在 React 中使用
dangerouslySetInnerHTML
属性显示 iframe - 在 React 中为 iframe 创建自定义组件
-
在 React 应用程序中放置
iframe
的效果
每个现代应用程序都需要一个 HTML 结构。React 开发人员使用 JSX 轻松构建应用程序的标记。JSX 的语法看起来很像 HTML,因此即使你是 React 的新手,也很容易编写。
在 React 中使用 dangerouslySetInnerHTML
属性显示 iframe
在某些情况下,你需要将 HTML 代码注入现有标记。在本文中,我们将讨论在你的应用程序中插入 iframe
标签的情况。
从服务器获取预结构化 HTML 代码作为响应的情况并不少见。大多数情况下,它被格式化为字符串。
将 iframe
插入 React 应用程序中最困难的部分是解析字符串值以获取其属性,例如源、宽度和高度。如果从服务器接收到的数据具有更多的结构并指定 iframe
的宽度、高度和来源,这会更容易一些。例如,它可以是具有与这些值对应的属性的对象。
将 iframe
插入 React 应用程序的最简单方法是使用 dangerouslySetInnerHTML
属性。该属性的值应该是一个带有 __html
键和字符串 HTML 值的对象。
让我们看一个例子:
export default function App(props) {
const {
iframeSource = '<iframe src="https://codesandbox.io/"></iframe>'
} = props;
return <div className="App" dangerouslySetInnerHTML={{__html: iframeSource}}></div>;
}
这是一个相当简单的演示。我们有一个带有默认值的 iframeSource
属性,一个字符串形状的 iframe
标签。
我们只返回一个带有 dangerouslySetInnerHTML
属性的 div
元素,该属性设置为带有 __html
键和 HTML 字符串的对象。
你可以在 codesandbox 上测试示例代码。
在 React 中为 iframe 创建自定义组件
根据源代码的结构,创建一个不使用 dangerouslySetInnerHTML
的自定义组件可能会更好。如果诸如 source
、width
和 height
之类的 iframe
属性可用,你可以将它们作为 props 传递并完全避免使用 dangerouslySetInnerHTML
。
让我们看一个例子:
export default function Component(props){
const {source, height, width} = this.props
return (
<div>
<iframe src={source} height={height} width={width}/>
</div>
)
}
这是一个更简单的解决方案。你可以在应用程序的任何地方使用这个组件,只要你有必要的值作为 props 传递。
有时你必须解析字符串以提取 iframe
标签的高度、宽度和来源等值。出于安全原因,最好避免使用 dangerouslySetInnerHTML
属性,如下所述。
在 React 应用程序中放置 iframe
的效果
一般来说,在你的 React 应用程序中放置 iframe
被认为是一种不安全的做法。问题是你无法控制源页面,它可以显示任何内容。
iframe
中的页面可能需要很长时间才能加载,这也会影响整个页面的性能。
除此之外,dangerouslySetInnerHTML
属性会将你的访问者暴露给 XSS 攻击。还有其他安全风险和潜在泄漏。
根据经验,如果你的 React 应用程序必须包含 iframe
标签,请确保你信任源页面不会尝试任何恶意行为。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn