解決從父視窗向 iframe 使用 postMessage 時的原始錯誤（在 DOMWindow 上執行 'postMessage' 失敗）

Question

我正在嘗試透過發送包含字串化物件的訊息來使兩個 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').

Answer 1

這是因為當您呼叫此postMessage() 方法時，您的iframe 文件尚未加載，因此您收到的contentWindow 是原始about:blank 文件之一，而不是您期望的文檔。

有人可能會說，這裡的錯誤訊息有點令人困惑，您的開發工具可能會更好（也？）報告該位置的來源是about:blank （即使它是已檢查的全域文件的origin對於postMessage())。

但無論如何，要解決該問題，請等待 <iframe> 的 load 事件。 （很抱歉，我不是一個reactJS忍者，所以我會讓你找到最好的方法來做到這一點）。

這是應用了解決方案的普通重現設定：https://jsfiddle.net/382pz5er/ （外包是因為 StackSnippet 的 null 起源幀在這裡是一個壞例子）。