React中使用iframe srcDoc渲染API返回HTML并动态修改指定元素内容

方法1：动态拼接srcDoc内容 #

直接将props传入的动态值插入到基础HTML字符串中，生成完整内容后传给srcDoc，实现iframe的自动更新。

import React from 'react';

const IframeDynamicContent = ({ name }) => {
  // 从API获取的基础HTML模板
  const baseHtml = '<p>name: <span id="name"></span></p>';
  // 替换空span为带动态内容的span
  const dynamicHtml = baseHtml.replace('<span id="name"></span>', `<span id="name">${name}</span>`);

  return (
    <iframe
      srcDoc={dynamicHtml}
      width="100%"
      height="50"
      frameBorder="0"
    />
  );
};

export default IframeDynamicContent;

适用场景：HTML结构简单，不需要频繁局部更新的场景，实现成本最低。

方法2：直接操作iframe内部DOM #

通过React ref获取iframe实例，直接操作其内部文档对象，实现局部内容更新，避免iframe整体重新渲染。

import React, { useEffect, useRef } from 'react';

const IframeDynamicContent = ({ name }) => {
  const iframeRef = useRef(null);
  const baseHtml = '<p>name: <span id="name"></span></p>';

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    // 初始化iframe内容
    const doc = iframe.contentDocument || iframe.contentWindow.document;
    doc.open();
    doc.write(baseHtml);
    doc.close();

    // 更新目标span的内容
    const nameSpan = doc.getElementById('name');
    if (nameSpan) nameSpan.textContent = name;
  }, [name]);

  return (
    <iframe
      ref={iframeRef}
      width="100%"
      height="50"
      frameBorder="0"
    />
  );
};

export default IframeDynamicContent;

适用场景：HTML结构复杂，需要频繁更新局部内容的场景，性能更优。

方法3：postMessage跨上下文通信 #

如果iframe内有独立业务逻辑，可通过postMessage实现父组件与iframe的通信，由iframe内部脚本处理内容更新。

import React, { useEffect, useRef } from 'react';

const IframeDynamicContent = ({ name }) => {
  const iframeRef = useRef(null);
  const baseHtml = `
    <p>name: <span id="name"></span></p>
    <script>
      // 监听父组件发送的更新消息
      window.addEventListener('message', (event) => {
        if (event.data?.type === 'UPDATE_NAME') {
          const nameSpan = document.getElementById('name');
          if (nameSpan) nameSpan.textContent = event.data.value;
        }
      });
    </script>
  `;

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    // 向iframe发送更新指令
    iframe.contentWindow.postMessage(
      { type: 'UPDATE_NAME', value: name },
      window.location.origin // 避免使用*，指定当前源更安全
    );
  }, [name]);

  return (
    <iframe
      ref={iframeRef}
      srcDoc={baseHtml}
      width="100%"
      height="50"
      frameBorder="0"
    />
  );
};

export default IframeDynamicContent;

适用场景：iframe内有独立交互逻辑，或需要与父组件进行复杂数据交互的场景。

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