Contourner l'erreur d'origine lors de l'utilisation de postMessage de la fenêtre parent vers l'iframe ('postMessage' a échoué sur DOMWindow)

Question

J'essaie de faire communiquer deux applications React en envoyant des messages contenant des objets stringifiés.

Le parent (http://localhost:3000) envoie le message via postMessage comme ceci :

    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) ne reçoit pas le message, du moins pas immédiatement (je dois attendre l'actualisation logicielle de réaction pour afficher le journal).

La première erreur renvoyée est :

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

En effet, lorsque vous appelez cela postMessage() 方法时，您的 iframe 文档尚未加载，因此您收到的 contentWindow 是原始 about:blankun des documents n'est pas celui que vous attendiez.

On pourrait dire que le message d'erreur ici est un peu déroutant, et vos outils de développement pourraient faire un meilleur travail pour (aussi ?) signaler l'origine de cet emplacement about:blank （即使它是已检查的全局文档的 origin对于 postMessage()).

Mais quoi qu'il en soit, pour résoudre le problème, attendez l'événement <iframe> 的 load. (Désolé, je ne suis pas un ninja de ReactJS, je vous laisse donc trouver la meilleure façon de procéder).

Voici une configuration de repro triviale avec la solution appliquée : https://jsfiddle.net/382pz5er/ (sous-traitée car le cadre d'origine nulle de StackSnippet est un mauvais exemple ici).