iframe与父应用postMessage通信异常：子应用变量未更新

核心问题分析 #

你的代码存在几个关键问题导致变量无法正确更新：

• 接收端错误地在 setTimeout 内部调用 React 的 useEffect 钩子，违反了 React 钩子调用规则，消息监听器无法正常注册。
• 直接赋值 headerInfo = false 若 headerInfo 是 React 状态变量，不会触发组件重渲染，页面按钮无法被移除。
• 发送端使用 * 作为目标源存在安全风险，接收端额外延迟可能导致错过消息。

修正后的发送端代码 #

const sendBooleanToIframe = () => {
    const iframe = frameRef.current;
    if (iframe) {
        // 替换为子应用实际域名，例如 'https://your-subapp-domain.com'
        const targetOrigin = 'https://your-subapp-domain.com';
        iframe.contentWindow?.postMessage({ yourBooleanVariable: true }, targetOrigin);
    }
};

useEffect(() => {
    const iframeLoadHandler = () => {
        sendBooleanToIframe();
    };
    const iframe = frameRef.current;
    if (iframe) {
        iframe.addEventListener('load', iframeLoadHandler);
    }
    return () => {
        if (iframe) {
            iframe.removeEventListener('load', iframeLoadHandler);
        }
    };
}, []);

修正后的接收端代码 #

假设 headerInfo 是控制按钮显示的 React 状态变量：

import { useState, useEffect } from 'react';

// 定义状态变量控制按钮显示
const [headerInfo, setHeaderInfo] = useState(true);

useEffect(() => {
    const handleMessage = (event) => {
        console.log('start handleMessage diagnostics');
        // 校验消息来源，替换为父应用实际域名
        if (event.origin !== 'https://your-parent-app-domain.com') {
            return; // 拒绝未知来源消息
        }
        if (event.data.yourBooleanVariable !== undefined) {
            console.log('Menssage iframe:', event.data.yourBooleanVariable);
            // 使用 setState 更新状态，触发组件重渲染隐藏按钮
            setHeaderInfo(false);
        }
    };

    window.addEventListener('message', handleMessage);
    return () => {
        window.removeEventListener('message', handleMessage);
    };
}, []);

关键修复点说明 #

1. 移除接收端多余的 setTimeout：直接在组件顶层用 useEffect 注册监听器，确保组件挂载时监听器生效，不会错过父应用的消息。
2. 使用 React 状态更新函数：必须通过 setHeaderInfo 更新状态，触发组件重渲染才能让按钮隐藏的逻辑生效。
3. 明确消息来源校验：发送端指定子应用域名，接收端校验 event.origin，避免安全风险同时确保消息可信。
4. 移除不必要的延迟：父应用在 iframe 加载完成后直接发送消息，避免时序问题导致接收失败。

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