React中同一iframe放置在两个位置时如何实现仅单次加载

核心原理 #

你原来的写法会触发两次请求的原因是：React中同一个JSX元素被多次渲染时，每次都会生成独立的真实DOM节点，而iframe作为独立的浏览上下文，每创建一个新的DOM实例就会发起一次资源请求。同时DOM规范中同一个节点不能同时存在于文档流的两个位置，所以不能直接复制iframe节点复用。

场景1：两个位置不同时展示（推荐方案） #

如果iframe只需要在同一时间出现在其中一个位置（比如Tab切换、弹窗显隐等场景），直接移动唯一的iframe实例即可，全程只会发起一次请求：

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

const Page = () => {
  // 存储唯一的iframe实例
  const iframeRef = useRef(null);
  // 两个占位容器的引用
  const container1Ref = useRef(null);
  const container2Ref = useRef(null);
  // 示例状态：控制当前iframe展示在哪个位置，可根据实际业务逻辑修改
  const [showInFirstPosition, setShowInFirstPosition] = useState(true);

  // 初始化仅创建一次iframe，仅发起一次请求
  useEffect(() => {
    const iframe = document.createElement('iframe');
    iframe.src = '/some-url';
    iframeRef.current = iframe;
    // 默认挂载到第一个位置
    container1Ref.current.appendChild(iframe);
  }, []);

  // 切换位置时仅移动DOM节点，不会重新加载iframe
  useEffect(() => {
    if (!iframeRef.current) return;
    if (showInFirstPosition) {
      container1Ref.current.appendChild(iframeRef.current);
    } else {
      container2Ref.current.appendChild(iframeRef.current);
    }
  }, [showInFirstPosition]);

  return (
    <div>
      {/* 第一个位置的占位容器 */}
      <div ref={container1Ref} />
      ...some other content
      {/* 第二个位置的占位容器 */}
      <div ref={container2Ref} />
      {/* 示例切换按钮，可替换为实际业务触发逻辑 */}
      <button onClick={() => setShowInFirstPosition(prev => !prev)}>切换iframe展示位置</button>
    </div>
  );
};

场景2：两个位置需要同时展示 #

如果需要同时在两个位置看到iframe内容，可以选以下两种方案：

• 方案A（改造成本最低）：给/some-url对应的响应头配置强缓存，设置Cache-Control: public, max-age=31536000之类的规则，第二个iframe发起请求时会直接读取本地缓存，不会给服务器造成额外负担，唯一缺点是会多占一份iframe的内存开销。
• 方案B（性能更优但有跨域限制）：如果iframe和主站同源，可以用canvas实时绘制iframe的内容快照，把快照展示在第二个位置，不需要创建第二个iframe实例。

注意事项 #

• 移动iframe实例的过程中，iframe内部的所有状态（表单输入、滚动位置、音视频播放进度等）都会完整保留，不会被重置。
• 如果是跨域iframe无法读取内部内容，同时展示场景优先选择强缓存方案。

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