JS : postMessage를 사용하기 위해 window.parent를 가져올 수 없습니다.

Question

window.postMessage()을 사용하여 컨테이너 window과 iframe 콘텐츠 window 사이에서 통신하는 방법에 관한 많은 자습서를 따르고 있습니다.

그러나 수신자의 window을 대상으로 할 수 없거나 postMessage()이라고 부르는 문제가 발생하거나, 내가 얻은 개체가 비어 있습니다. 여기에 몇 가지 설명이 있으며, Github repo에있는 코드를보고 나를 따라갈 수 있습니다.

정확히 두 가지 프로젝트, iframe-content 및 iframe-container이 있습니다. 각 프로젝트는 window 개체를 타겟팅하여 window.postMessage()에 전화 할 수 있어야합니다.

var childWindow = document.getElementById('iframeContent').contentWindow 
console.log('childWindow: ', childWindow); 

오류가 발생하지 않습니다이 코드 만 반환 window 개체를 실행하는 용기의 경우

는 어떠한 속성이 없습니다. See the code.

마찬가지로 <iframe> 콘텐츠

var parentWindow = $window.parent; 
console.log('parentWindow: ', parentWindow); 

에서 이렇게하면 용기에 관한 설명과 동일한다. See the code. postMessage() 함수가 오류를 반환 호출, 두 경우 모두

, 실제로 실패

무슨 뜻 빈 window 개체의 스크린 샷을 참조하십시오.

무엇을 간과 할 수 있습니까? 무엇을 조사해야합니까? 감사합니다. 감사합니다.

Answer 1

도메인 간 iframe에 액세스하려고하는 것 같습니다. 정확한 오리진 및 이벤트 리스너로 API를 설정하십시오.

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

iframe이 기억은`document.getElementById를 ('iframeContent'). contentWindow.postMessage` 반환 무엇 메시지

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    if (event.origin !== "http://example.org:8080") 
    return; 

    // ... 
}