Umgehen des ursprünglichen Fehlers bei der Verwendung von postMessage vom übergeordneten Fenster zum Iframe („postMessage“ ist auf DOMWindow fehlgeschlagen)

Question

Ich versuche, zwei React-Anwendungen zur Kommunikation zu bringen, indem ich Nachrichten sende, die stringifizierte Objekte enthalten.

Der Elternteil (http://localhost:3000) sendet die Nachricht über postMessage wie folgt:

    let iframe = document.querySelector("iframe")

    useEffect(() => {
        if (!!localStorageObject && !!iframe) {
            iframe?.contentWindow?.postMessage(localStorageObject, "http://localhost:3001")
        }
    }, [localStorageObject, iframe])

    // ...file and start of return

   <iframe
       style={{minHeight: window.outerHeight, width: '100%', border: "none"}}
       referrerPolicy="strict-origin-when-cross-origin"
       src={myUrlWithParams}
       title="App"
       allow="clipboard-write"
       id={"iframe"}
   />

iFrame (http://localhost:3001) empfängt die Nachricht nicht, zumindest nicht sofort (ich muss warten, bis die Soft-Aktualisierung der Reaktion das Protokoll anzeigt).

Der erste ausgegebene Fehler ist:

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

Answer 1

这是因为当您调用此 postMessage() 方法时，您的 iframe 文档尚未加载，因此您收到的 contentWindow 是原始 about:blank 文档之一，而不是您期望的文档。

有人可能会说，这里的错误消息有点令人困惑，并且您的开发工具可能会更好（也？）报告该位置的来源是 about:blank （即使它是已检查的全局文档的 origin对于 postMessage())。

但无论如何，要解决该问题，请等待 <iframe> 的 load 事件。 （很抱歉，我不是一个reactJS忍者，所以我会让你找到最好的方法来做到这一点）。

这是应用了解决方案的普通重现设置：https://jsfiddle.net/382pz5er/ （外包是因为 StackSnippet 的 null 起源帧在这里是一个坏例子）。