在React中如何向iframe插入HTML数据？

核心实现思路 #

在React中操作多个iframe，核心是通过ref获取每个iframe的DOM实例，再通过原生DOM API向其插入内容，替代静态HTML中的jQuery写法。以下是具体实现步骤：

代码示例 #

import { useRef, useEffect } from 'react';

function ThemeIframeRenderer() {
  // 用对象存储每个iframe的ref，以html项的唯一id作为key，避免遍历索引混乱
  const iframeRefs = useRef({});
  // 示例state数据，对应你的stateTheme.htmls
  const { htmls } = stateTheme;

  // 监听htmls变化，同步更新对应iframe内容
  useEffect(() => {
    htmls.forEach(item => {
      const iframe = iframeRefs.current[item.id];
      if (!iframe) return;

      // 获取iframe的document对象（兼容不同浏览器写法）
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      // 插入目标HTML内容
      iframeDoc.body.innerHTML = item.content;
    });
  }, [htmls]);

  return (
    <div className="iframe-container">
      {htmls.map(item => (
        <iframe
          key={item.id}
          // 给每个iframe绑定ref到集合中
          ref={el => (iframeRefs.current[item.id] = el)}
          // 按需设置属性：sandbox需根据权限调整，确保可访问iframe内容
          sandbox="allow-same-origin"
          width="100%"
          height="400"
          border="0"
        />
      ))}
    </div>
  );
}

export default ThemeIframeRenderer;

关键注意事项 #

• Ref的存储方式：用对象而非数组存储ref，避免遍历渲染时因索引变化导致的ref混乱，确保每个iframe对应唯一的html项。
• Xcomponent适配：如果使用的是Xcomponent封装的iframe组件，需要确认该组件是否支持forwardRef转发底层iframe的DOM引用。若支持，只需将示例中的<iframe>替换为Xcomponent的组件即可，ref绑定逻辑不变。
• Sandbox权限：如果iframe设置了sandbox属性，必须添加allow-same-origin（同域内容场景），否则会因跨域限制无法访问iframe的document对象。
• 内容更新时机：通过useEffect监听htmls的变化，确保数据更新时自动同步到对应iframe中，符合React的生命周期逻辑。

内容的提问来源于stack exchange，提问作者Hunter