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

父组件（React侧）修改方案 #

给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(() => {
    // 处理iframe发来的消息
    const handleMessage = (event) => {
      // 验证消息来源，只处理可信域名的消息
      if (event.origin !== 'https://你的iframe页面域名.com') return;
      
      if (event.data === 'trigger-state-update') {
        setState(true);
      }
    };

    // 绑定监听事件
    window.addEventListener('message', handleMessage);

    // 组件卸载时清理监听
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, []);

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

iframe内部页面修改方案 #

在iframe的按钮点击事件中，向父窗口发送消息：

<button id="updateStateBtn">点击更新父组件状态</button>

<script>
  const updateBtn = document.getElementById('updateStateBtn');
  updateBtn.addEventListener('click', () => {
    // 向父窗口发送触发信号，指定父窗口域名保证安全
    window.parent.postMessage('trigger-state-update', 'https://父组件页面域名.com');
  });
</script>

关键注意事项 #

• 必须验证消息来源：通过event.origin过滤非可信域名的消息，避免恶意注入
• 指定目标域名：postMessage的第二个参数尽量写具体的父窗口域名，不要用'*'（不安全）
• 若iframe和父窗口为同域名，也可以直接调用父窗口的全局方法，但postMessage是更通用、安全的跨域兼容方案

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