상위 창에서 iframe으로 postMessage를 사용할 때 발생하는 원래 오류 해결(DOMWindow에서 'postMessage' 실패)

Question

문자열화된 객체가 포함된 메시지를 보내 두 개의 React 애플리케이션이 통신하도록 하려고 합니다.

부모(http://localhost:3000)는 postMessage를 통해 다음과 같이 메시지를 보냅니다.

으아아아

iFrame(http://localhost:3001)은 적어도 즉시 메시지를 받지 못합니다(로그를 표시하려면 반응 소프트 새로 고침을 기다려야 합니다).

첫 번째 오류는 다음과 같습니다.

    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"}
   />

Answer 1

전화했을 때 postMessage() 方法时，您的 iframe 文档尚未加载，因此您收到的 contentWindow 是原始 about:blank문서 중 하나가 예상한 문서가 아니기 때문입니다.

여기에 있는 오류 메시지가 약간 혼란스럽다고 말할 수도 있으며, 개발 도구가 이 위치의 출처를 보고하는 작업을 더 잘 수행할 수도 있습니다 about:blank （即使它是已检查的全局文档的 origin对于 postMessage()).

하지만 어쨌든 문제를 해결하려면 <iframe> 的 load 이벤트를 기다리세요. (죄송합니다. 저는 ReactJS 전문가가 아니므로 이를 수행하는 가장 좋은 방법을 찾도록 하겠습니다).

다음은 솔루션이 적용된 간단한 재현 설정입니다. https://jsfiddle.net/382pz5er/(StackSnippet의 null 원본 프레임이 여기서 나쁜 예이기 때문에 아웃소싱됨).