React 嵌入 iframe 需要注意哪些事项

在 React 中嵌入 iframe 是一种常见的需求，通常用于嵌入外部网页、隔离样式或加载独立的内容。以下是实现 React 中嵌入 iframe 的方法和最佳实践。

基本用法

在 React 中,可以直接使用 HTML 的 <iframe> 标签嵌入外部页面。例如:

import React from 'react';

const IframeExample = () => {
  return (
    <iframe
      src="https://example.com"
      width="100%"
      height="500px"
      style={{ border: 'none' }}
      title="Example Iframe"
    ></iframe>
  );
};

export default IframeExample;

这种方式适用于简单的嵌入需求。

难点 1：自适应父容器尺寸

宽度很容易，直接使用 100% 即可。

iframe 的高度通常需要根据内容动态调整，可以在 iframe onLoad 后获取其高度然后动态设置，详见[1]，此处不表。但该方法只适用于同域否则尝试使用 iframe.contentWindow 将报错。更好的方式是设置 height="100%"，让 iframe 主动适配父容器的宽高，也就是让 iframe 的目标网站做自适应，当然这个网站的作者须是自己团队，而且做自适应也是合理的要求。

难点 2：如何将父容器的组件嵌入 iframe

比如我们想在嵌入页面内部增加一个按钮，点击后执行父容器的业务操作，简单点就是不嵌入放到顶部，但是这样用户体感不好，我们想实现的效果是沉浸式的即让按钮和 iframe 融合在一起。

做法 1

iframe 本身做调整，预先设计好组件（组件的显示可以通过 URL 参数），然后通过 postMessage 做通信。

做法 2

被嵌入组件设置绝对定位，让其从感官上被“嵌入”，此方法 iframe 本身无改动，更灵活，父容器想嵌入什么就嵌入，当然对嵌入的位置有要求 iframe 也得留有空间。

<div style={{ height: '100%', position: 'relative', margin: '-16px', overflow: 'hidden' }}>
  <GoBack style={{ margin: GAP, position: 'absolute' }}>
    返回
  </GoBack>

  <iframe
    ref={iframeRef}
    style={{ width: '100%', height: '100%', border: 'none' }}
    title="Chat with AI"
    src={src}
  />
</div>

其他

建议给 iframe 增加 title 属性：

1. 符合无障碍要求
2. 代码即注释：更好的一种解释 iframe 用途的注释方式，何乐而不为

其次不必要使用 www.npmjs.com/package/rea… 该包只是对属性加了 ts 类型以及加入了默认值，没有更多功能增强，反而给调试和代码阅读增加成本。