如何从iframe触发更新React组件的state状态

问题原因 #

你遇到的跨域报错是浏览器同源策略的强制限制：只要两个页面的协议、域名、端口任意一项不一致，就无法直接访问对方的DOM或者全局变量，你之前直接操作iframe内部DOM的方式本身就不符合跨域场景的开发规范。

最优解决方案是使用HTML5标准提供的window.postMessage方法实现跨源通信，具体实现步骤如下：

第一步：React父页面实现 #

给iframe添加ref，监听iframe发来的合法消息后调用setThing更新状态即可：

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

export default () => {
  const [thing, setThing] = useState();
  const iframeRef = useRef(null);

  useEffect(() => {
    // 监听iframe发来的消息
    const handleMessage = (event) => {
      // 安全校验：仅处理信任来源的消息，生产环境替换为正式域名
      if (event.origin !== 'http://localhost:8000') return;
      // 可选增加消息类型校验，避免误处理其他业务消息
      if (event.data?.type === 'UPDATE_THING') {
        setThing(event.data.payload);
      }
    };

    window.addEventListener('message', handleMessage);
    // 组件卸载时移除监听避免内存泄漏
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <div>
      <p>Here is your selected thing:</p>
      {thing}
      <iframe ref={iframeRef} src="http://localhost:8000" />
    </div>
  )
}

第二步：iframe侧HTML页面实现 #

在你可控的HTML页面中，需要触发状态更新的逻辑（比如按钮点击事件）里调用parent.postMessage向父页面发消息即可：

<!DOCTYPE html>
<html>
<body>
  <button id="addThingButton">传递数据到父页面</button>
  <script>
    const addBtn = document.getElementById('addThingButton');
    addBtn.addEventListener('click', () => {
      // 自定义要传递的业务数据
      const newThing = '来自iframe的更新内容';
      // 第二个参数填写父页面的源，生产环境替换为正式域名
      parent.postMessage({
        type: 'UPDATE_THING',
        payload: newThing
      }, 'http://localhost:3000');
      // 若不确定父页面源可临时填'*'，但安全性较低不推荐生产环境使用
    })
  </script>
</body>
</html>

补充说明 #

• 该方案是跨源iframe通信的W3C标准实现，兼容所有现代浏览器，不存在跨域限制
• 如果需要父页面主动向iframe发消息，反过来调用iframeRef.current.contentWindow.postMessage即可，iframe侧同样用window.addEventListener('message')监听处理
• 生产环境务必严格校验消息来源和消息格式，避免恶意页面伪造消息造成安全风险

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