Chrome에서 window.postMessage와 관련된 문제가 발생했습니다.

Question

몇 시간 동안 계속되었습니다.

에 b.html의 src가 포함 된 http://example.com에 a.html이 있습니다. a.html에는 iframe에 postMessage에 대한 일부 JS 코드 이 있습니다.

PostMessage를하는 코드는 간단하다 : 나는 또한 시도

Unable to post message to http://subdomain.example.com. Recipient has origin null. 

:

iframe_window.postMessage('message', 'http://subdomain.example.com') 

그러나 운이

iframe_window.postMessage('message', iframe_element.src) 

그러나이 방법은 크롬에서 오류가 발생합니다!

이 작동하는 유일한 방법입니다 : 내가 들었

iframe_window.postMessage('message', '*') 

그러나이 '*'는 사용하지 않는 것이 좋다.

Firefox에서 문제가 없습니다.

Answer 1

신호가 전송 될 때 자식 iframe이로드되지 않아서 iframe.src에 적절한 값이없는 것 같습니다.

나는 약간의 테스트를했고 당신과 같은 오류가 있었지만, postTimeout에서 호출을 감싸고 100ms를 기다렸다가 아무런 오류도 발생하지 않았다. 이것이 초기화 경쟁 조건이라는 것을 알았다. 여기

내가에서는 setTimeout없이 청소기 솔루션을 구현하는 방법은 다음과 같습니다

부모 :

window.addEventListener("DOMContentLoaded", function() { 

    var iframe = document.querySelector("iframe") 
     , _window = iframe.contentWindow 

    window.addEventListener("message", function(e) { 

     // wait for child to signal that it's loaded. 
     if (e.data === "loaded" && e.origin === iframe.src.split("/").splice(0, 3).join("/")) { 

      // send the child a message. 
      _window.postMessage("Test", iframe.src) 
     } 
    }) 

}, false) 

아이 :

window.addEventListener("DOMContentLoaded", function() { 

    // signal the parent that we're loaded. 
    window.parent.postMessage("loaded", "*") 

    // listen for messages from the parent. 
    window.addEventListener("message", function(e) { 

     var message = document.createElement("h1") 

     message.innerHTML = e.data 

     document.body.appendChild(message) 

    }, false) 

}, false) 

이 아이가 누군가에게 신호를 보냅니다있는 간단한 해결책이다 그것은로드 된 것입니다 ("*"를 사용합니다. 민감하지 않으므로 아무 것도 보내지 않습니다.) 부모는로드 된 이벤트를 청취하고 그것이로드 된 이벤트를 청취하고 그것이 중간에있는 자식인지 확인합니다 그것에서 방출되는 ested.

그런 다음 부모가 자식을받을 준비가 된 메시지를 보냅니다. 아이가 메시지를 받으면 <h1>에 데이터를 넣고 < 본문 >에 추가합니다.

Chrome에서 실제 하위 도메인을 테스트했으며이 솔루션이 저에게 효과적이었습니다.