我正在嘗試透過發送包含字串化物件的訊息來使兩個 React 應用程式進行通訊。
父級（http://localhost:3000）透過 postMessage 傳送訊息，如下所示：
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) 沒有收到訊息，至少沒有立即收到訊息（我必須等待反應軟刷新才能顯示日誌）。
首先拋出的錯誤是：
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3001') does not match the recipient window's origin ('http://localhost:3000'). 
這是因為當您呼叫此
postMessage()方法時，您的iframe 文件尚未加載，因此您收到的contentWindow是原始about:blank文件之一，而不是您期望的文檔。有人可能會說，這裡的錯誤訊息有點令人困惑，您的開發工具可能會更好（也？）報告該位置的來源是
about:blank（即使它是已檢查的全域文件的origin對於postMessage())。但無論如何，要解決該問題，請等待
<iframe>的load事件。 （很抱歉，我不是一個reactJS忍者，所以我會讓你找到最好的方法來做到這一點）。這是應用了解決方案的普通重現設定：https://jsfiddle.net/382pz5er/ （外包是因為 StackSnippet 的 null 起源幀在這裡是一個壞例子）。