React中通过state修改iframe的src后，load事件不触发的问题求助

我们在React应用中构建注册表单，通过iframe嵌入多语言HTML格式的法律协议文档，用户可通过下拉菜单切换语言（独立于全局i18n设置）。法务部门要求不能修改协议文档，且用户必须滚动到文档底部才能启用“同意”复选框。

当前实现的逻辑仅在组件初始渲染时有效，当切换语言并修改iframe的src后，load事件未触发，导致滚动监听无法注册，复选框始终无法启用——但相同逻辑用原生JavaScript实现却能正常运行。

相关代码如下：

import { useEffect, useRef, useState } from "react";
import "./styles.css";

export default function App() {
  const [language, setLanguage] = useState("en");
  const [tncRead, setTncRead] = useState(false);

  const iframeRef = useRef();

  useEffect(() => {
    if (iframeRef) {
      const currentRef = iframeRef.current;
      // 等待iframe文档加载完成
      iframeRef.current.contentWindow.addEventListener("load", () => {
        console.log("onLoad fired");
        // 注册滚动监听
        iframeRef.current.contentDocument.addEventListener(
          "scroll",
          handleOnScroll
        );
      });

      return () => {
        if (currentRef) {
          console.log("unregistered listener");
          currentRef.contentDocument.removeEventListener(
            "scroll",
            handleOnScroll
          );
        }
      };
    }
  }, [language]);

  function handleLanguageChange(e) {
    setLanguage(e.target.value);
  }

  function handleOnScroll(e) {
    const scrollingElement = e.target.scrollingElement;
    const hasReachedBottom =
      scrollingElement.scrollHeight - scrollingElement.clientHeight <=
      scrollingElement.scrollTop + 50;
    if (!tncRead && hasReachedBottom) {
      setTncRead(true);
    }
  }

  return (
    <div className="App">
      <div>
        <label>Language :</label>
        <select onChange={handleLanguageChange}>
          <option value="en">English</option>
          <option value="zh">中文</option>
        </select>
      </div>
      <iframe ref={iframeRef} id="tnc-frame" src={`tnc_${language}.html`} />
      <div>
        <input type="checkbox" disabled={!tncRead} />
        <label>I agree to the Terms & Conditions</label>
      </div>
    </div>
  );
}

1. React的iframe复用机制：修改src时，React会复用现有iframe元素而非重新创建。如果新文档加载速度快（比如命中缓存），load事件可能在监听注册前就已触发，导致无法捕获。
2. 监听注册时机滞后：useEffect执行时，iframe可能已经处于加载完成状态，此时添加的load监听无法生效。
3. 状态未重置：切换语言后，tncRead状态未重置，即便新的滚动监听生效，也可能因状态未更新导致复选框状态异常。

方案1：通过key强制重建iframe #

给iframe添加与language绑定的key属性，语言切换时React会销毁旧iframe并创建新实例，确保load事件能被正确捕获：

<iframe 
  ref={iframeRef} 
  id="tnc-frame" 
  src={`tnc_${language}.html`}
  key={language} // 添加此行
/>

方案2：主动检查iframe加载状态 #

在useEffect中，除了监听load事件，还主动检查iframe的加载状态，若已加载完成则直接注册滚动监听：

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

  const currentRef = iframeRef.current;
  const contentWindow = currentRef.contentWindow;
  // 重置状态，确保切换语言后需重新滚动
  setTncRead(false);

  const handleLoad = () => {
    console.log("onLoad fired");
    currentRef.contentDocument.addEventListener("scroll", handleOnScroll);
  };

  // 检查文档是否已加载完成
  if (contentWindow.document.readyState === "complete") {
    handleLoad();
  } else {
    contentWindow.addEventListener("load", handleLoad);
  }

  return () => {
    contentWindow.removeEventListener("load", handleLoad);
    if (currentRef.contentDocument) {
      currentRef.contentDocument.removeEventListener("scroll", handleOnScroll);
    }
  };
}, [language]);

方案3：优化滚动监听逻辑 #

调整handleOnScroll，避免重复设置状态，提升性能：

function handleOnScroll(e) {
  const scrollingElement = e.target.scrollingElement;
  const hasReachedBottom =
    scrollingElement.scrollHeight - scrollingElement.clientHeight <=
    scrollingElement.scrollTop + 50;
  // 仅当状态不一致时更新
  if (tncRead !== hasReachedBottom) {
    setTncRead(hasReachedBottom);
  }
}

• 方案1简单直接，通过React的key机制强制重建元素，适合大多数场景；
• 方案2无需重建iframe，通过主动检查加载状态适配不同场景，减少DOM操作开销；
• 两种方案都需在语言切换时重置tncRead状态，确保符合“用户必须重新滚动到底部”的法务要求。

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