点击iframe内按钮时如何更新React组件状态？

步骤1：修改React组件，监听iframe消息 #

给React组件添加消息监听逻辑，接收来自iframe的指令并更新状态：

import React, { useState, useEffect, useRef } from 'react';
import ReactIframeResizer from 'react-iframe-resizer-super';

const Component = () => {
  const [state, setState] = useState(false);
  const iframeRef = useRef(null);

  useEffect(() => {
    const handleMessage = (event) => {
      // 生产环境建议验证event.origin，只处理可信域名的消息
      if (event.data === 'triggerStateUpdate') {
        setState(true);
      }
    };

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

  return (
    <ReactIframeResizer
      ref={iframeRef}
      src={url}
    />
  );
};

export default Component;

步骤2：修改iframe内部页面，点击按钮发送消息 #

在iframe的页面中，给按钮绑定点击事件，向父页面发送状态更新指令：

<!-- iframe内部的HTML -->
<button id="updateStateBtn">更新父组件状态</button>

<script>
  document.getElementById('updateStateBtn').addEventListener('click', () => {
    // 生产环境请替换为父页面的实际域名，比如'https://your-app-domain.com'，禁止用'*'
    window.parent.postMessage('triggerStateUpdate', '*');
  });
</script>

安全提示 #

• 生产环境中，postMessage的目标源（第二个参数）必须指定具体域名，禁止使用*，防止消息被恶意页面拦截。
• 父组件的消息监听函数中，要验证event.origin是否为可信域名，过滤非法消息。

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