Chromeのwindow.postMessageに関する問題

Question

私は何時間もこれに固執しています。

のa.htmlには、 b.htmlのhttp://subdomain.example.comにsrcのiframeが含まれています。 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') 

しかし、NO LUCK

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

しかし、この方法では、Chromeはエラーがスローされます！

これは、それが動作する唯一の方法です：

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

しかし、私は聞いたことがある「*」を使用することが良くありません。

Firefoxでは問題はありません。

Answer 1

これは、信号が送信された時点で子iframeがロードされていないため、iframe.srcに適切な値が設定されていない可能性があります。

私はいくつかのテストを行いましたが、あなたと同じエラーが発生しましたが、postTimeoutでpostMessage呼び出しをラップして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) 

これは、子供が誰にも通知しますするシンプルなソリューションですそれはロードされている（「*」を使用して、大丈夫です。何もセンシティブなものが送信されないためです）。親はロードされたイベントをリッスンし、それが間にある子であることをチェックしますそれを放出していると推測される。

親は子にメッセージを送信します。子はそれを受け取る準備ができています。子供がメッセージを受け取ると、データは<h1>に格納され、<の本文>に追加されます。

私はこれを実際のサブドメインでChromeでテストしましたが、このソリューションは私のために働いていました。