如何在React组件中插入通过JavaScript创建的iframe元素

报错原因说明 #

• 第一个报错：你调用document.querySelector('#iframeContainer')的时候，React组件还没完成挂载渲染，对应DOM节点还不存在，返回值为null，调用appendChild方法自然抛出空指针错误。
• 第二个方法错误：首先React.createElement创建的是React虚拟DOM元素，不能直接和原生DOM操作混用；其次直接调用ReactDOM.render渲染到root节点会覆盖你原有应用的内容，不符合插入到指定组件的需求。

可行解决方法 #

方法1：React声明式写法（最推荐） #

直接在组件JSX中声明iframe标签，通过ref获取实例后操作，完全符合React的设计逻辑，不需要手动处理DOM挂载时机：

import { useRef, useEffect } from 'react';

function PreviewComponent() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;
    // 修改iframe样式
    iframe.style.width = '100%';
    iframe.style.height = '500px';
    iframe.style.border = '1px solid #eee';

    // 向iframe添加文本内容
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write(`<p>你要插入的预览内容</p>`);
    iframeDoc.close();
  }, []);

  return (
    <div id="iframeContainer">
      <iframe ref={iframeRef} title="预览容器" />
    </div>
  );
}

方法2：手动创建DOM挂载（适配特殊需求） #

如果确实需要通过原生JS动态创建iframe，把操作放到useEffect回调中即可，此时组件已经完成挂载，容器节点一定存在：

import { useEffect, useRef } from 'react';

function PreviewComponent() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const container = document.querySelector('#iframeContainer');
    // 此时container一定存在
    const iframe = document.createElement('iframe');
    iframe.title = '预览容器';
    container.appendChild(iframe);
    iframeRef.current = iframe;

    // 后续操作样式、添加内容逻辑同上
    iframe.style.width = '100%';
    iframe.style.height = '500px';
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.write('<p>预览内容</p>');

    // 组件卸载时清理创建的iframe，避免内存泄漏
    return () => {
      container.removeChild(iframe);
    }
  }, []);

  return <div id="iframeContainer"></div>
}

注意事项 #

• 如果iframe加载的是第三方外域资源，受浏览器同源策略限制，你无法操作iframe内部的DOM和样式
• 如果插入的内容包含用户输入的内容，务必做XSS过滤，也可以给iframe添加sandbox属性限制iframe的权限，降低安全风险
• 类组件可以把上述操作放到componentDidMount生命周期中执行，逻辑和函数组件的useEffect一致

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