Selesaikan ralat asal apabila menggunakan postMessage dari tetingkap induk ke iframe ('postMessage' gagal pada DOMWindow)

Question

Saya cuba mendapatkan dua aplikasi React untuk berkomunikasi dengan menghantar mesej yang mengandungi objek bertali.

Ibu bapa (http://localhost:3000) menghantar mesej melalui postMessage seperti ini:

    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) tidak menerima mesej, sekurang-kurangnya tidak serta-merta (saya perlu menunggu refresh lembut bertindak balas untuk menunjukkan log).

Ralat pertama yang dilemparkan ialah:

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

Ini kerana apabila anda memanggil ini postMessage() 方法时，您的 iframe 文档尚未加载，因此您收到的 contentWindow 是原始 about:blank salah satu dokumen tidak seperti yang anda harapkan.

Seseorang mungkin mengatakan bahawa mesej ralat di sini agak mengelirukan dan alat pembangunan anda mungkin melakukan tugas yang lebih baik (juga?) melaporkan asal usul lokasi ini about:blank （即使它是已检查的全局文档的 origin对于 postMessage()).

Tetapi bagaimanapun, untuk menyelesaikan masalah, tunggu acara <iframe> 的 load. (Maaf, saya bukan ninja reactJS, jadi saya akan membenarkan anda mencari cara terbaik untuk melakukan ini).

Berikut ialah persediaan repro yang remeh dengan penyelesaian yang digunakan: https://jsfiddle.net/382pz5er/ (disumber luar kerana bingkai asal nol StackSnippet ialah contoh yang tidak baik di sini).