在 React 应用程序中显示 iframe

Irakli Tchigladze 2023年1月30日
  1. 在 React 中使用 dangerouslySetInnerHTML 属性显示 iframe
  2. 在 React 中为 iframe 创建自定义组件
  3. 在 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 的自定义组件可能会更好。如果诸如 sourcewidthheight 之类的 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 Tchigladze avatar Irakli Tchigladze avatar

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