子ドメイン（iframe）から親ドメインへのクロスドメイン通信

Question

私はAEM（Adobe Experience Manager - cms）内のコンポーネントをページに持っており、このページを（別のドメインの）別のページにiframe。したがって、コンポーネントのコードではwindow.postMessage()を使用していますが、そのイベントを親プロセスでリッスンしようとしています。私はiframeの親とは通信してみましたが、正常に動作しましたが、他の方法で通信する必要があります。コンポーネントは検索コンポーネントなので、検索結果をクリックすると、親ウィンドウからリダイレクトしたいので、リダイレクト先のURLを送信してから親のJSコード内のリダイレクトを処理しようとしています。

コードは次のようになります。

のiframeから

function receiveMessage(e) 
{ 
    var key = e.message ? "message" : "data"; 
    var data = e[key]; 
    var redirect = JSON.parse(data); 
    redirectUrl = (redirect.origin ? redirect.origin : '') + (redirect.url ? 
    redirect.url : ''); 
    if (redirectUrl) { 
     window.location.href = redirectUrl; 
    } 
} 

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

（（親から - - HTML）

<iframe 
    width="1080" 
    height="700" 
    id="theFrame" 
    src="http://localhost:4502/content/zebra1/global/en_us/hey.html#q=print" 
    frameborder="0"> 
</iframe> 

（JS親から） /子供 - js）

goToSearchResults : function(event){ 

    var windowOrigin  = location.origin; 

    if(arguments[0].length == 3){ 
     var redirect = { 
      origin: windowOrigin, 
      url: arguments[0][1].url || '' 
     }; 
     if(!$('#supportSearchWrap').data('iframe')) { 
      location.replace(redirect.url); 
     } else { 
      window.postMessage(JSON.stringify(redirect), windowOrigin); 
     } 
    } 
    logger.log(redirect.origin + redirect.url , this.model); 

} 

私にとっては効果がありません。誰かが私が間違ってやっていることやこれを行うためのより良い方法を誰に見ているのですか？

Answer 1

window.postMessage - windowは、メッセージを投稿するウィンドウオブジェクトのインスタンスを指します。あなたの場合、それはiframeウィンドウの親でなければなりません。
window.parentまたは単にparentを使用してiframe内の参照を取得できます。

また、targetOriginプロパティは、ターゲットウィンドウのプロパティと一致する必要があります。 MDN docsからは以下の通りです。

targetOriginに はotherWindowの起源は（指定しないことを示します）、文字列リテラル「*」として、またはURIのいずれかとして、派遣されるイベントのためでなければならないものを指定します。イベントがディスパッチされる時点で、otherWindowのドキュメントのスキーム、ホスト名、またはポートがtargetOriginで提供されるものと一致しない場合、イベントはディスパッチされません。 3つすべてが一致した場合にのみイベントがディスパッチされます。