解决iframe postMessage跨域通信中的Origin不匹配错误

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3001') does not match the recipient window's origin ('http://localhost:3000').

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

function ParentApp() {
    const [localStorageObject, setLocalStorageObject] = useState({}); // 假设这里有一些数据
    const iframeUrl = "http://localhost:3001"; // iframe的实际源

    useEffect(() => {
        const iframe = document.querySelector("#myIframe");
        // 在iframe可能尚未完全加载时就尝试发送消息
        if (iframe && iframe.contentWindow) {
            console.log("尝试发送消息到iframe...");
            iframe.contentWindow.postMessage(localStorageObject, iframeUrl);
        }
    }, [localStorageObject]);

    return (
        <div>
            <h1>父应用</h1>
            <iframe
                id="myIframe"
                src={iframeUrl}
                style={{ width: '100%', height: '400px', border: 'none' }}
                title="子应用"
            />
        </div>
    );
}

export default ParentApp;

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

function ParentApp() {
    const [localStorageObject, setLocalStorageObject] = useState({ data: "Hello from Parent!" });
    const iframeUrl = "http://localhost:3001";
    const iframeRef = useRef(null); // 使用useRef获取iframe元素

    // 用于控制消息发送的函数
    const sendMessageToIframe = () => {
        if (iframeRef.current && iframeRef.current.contentWindow) {
            console.log("iframe已加载，正在发送消息...");
            iframeRef.current.contentWindow.postMessage(localStorageObject, iframeUrl);
        } else {
            console.warn("iframe未准备好或contentWindow不可用。");
        }
    };

    useEffect(() => {
        // 如果有需要，可以在这里监听localStorageObject的变化，但要确保iframe已加载
        // 实际发送消息的逻辑应该在iframe加载完成后触发
    }, [localStorageObject]);

    return (
        <div>
            <h1>父应用</h1>
            <iframe
                id="myIframe"
                ref={iframeRef} // 将ref绑定到iframe元素
                src={iframeUrl}
                style={{ width: '100%', height: '400px', border: 'none' }}
                title="子应用"
                // 关键：在iframe加载完成后调用sendMessageToIframe
                onLoad={sendMessageToIframe}
            />
        </div>
    );
}

export default ParentApp;

// 进阶：监听数据变化并确保iframe已加载
function ParentAppAdvanced() {
    const [localStorageObject, setLocalStorageObject] = useState({ data: "Initial Data" });
    const [iframeLoaded, setIframeLoaded] = useState(false);
    const iframeUrl = "http://localhost:3001";
    const iframeRef = useRef(null);

    // 监听localStorageObject的变化，并在iframe加载后发送
    useEffect(() => {
        if (iframeLoaded && iframeRef.current && iframeRef.current.contentWindow) {
            console.log("数据变化，向iframe发送新消息...");
            iframeRef.current.contentWindow.postMessage(localStorageObject, iframeUrl);
        }
    }, [localStorageObject, iframeLoaded]); // 依赖项中包含iframeLoaded

    const handleIframeLoad = () => {
        console.log("iframe已成功加载！");
        setIframeLoaded(true); // 设置iframe加载状态为true
        // 首次加载时也可以发送初始消息
        // iframeRef.current.contentWindow.postMessage(localStorageObject, iframeUrl);
    };

    return (
        <div>
            <h1>父应用 (高级)</h1>
            <button onClick={() => setLocalStorageObject({ data: `Updated: ${Date.now()}` })}>
                更新数据并发送到iframe
            </button>
            <iframe
                id="myIframe"
                ref={iframeRef}
                src={iframeUrl}
                style={{ width: '100%', height: '400px', border: 'none' }}
                title="子应用"
                onLoad={handleIframeLoad} // 监听加载事件
            />
        </div>
    );
}