iframeを使ったpostMessageでデータのやりとりについて

Question

回答いただきたい事象

iframeで開いたページ（ページA）から元のページ（ページB）でデータを受け取ることができません。
Google Tam Managerで両方のページに実装をしています。

下記、ページAとページBの実際のコードになります。URLのみ変更しています。

ページAのコード

<script type="text/javascript">
window.addEventListener('message', function(event) {
    event.source.postMessage('Hello!', event.origin);
}, false);
</script>

ページBのコード

<iframe id="ifrm" src="https://sample.jp/index.html" style="display:none;"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifrm = document.getElementById('ifrm').contentWindow;
    ifrm.postMessage("message", 'https://sample.jp/index.html');
};

window.addEventListener('message', function(event) {
    console.log(event.data); 
}, false);
</script>

期待する挙動

ページBを開いた時に「Hello!」がconsoleに表示されることを期待してコーディングしていますが、「Hello!」が表示されません。

何か情報が不足していたらコメントいただけると幸いです。

Answer 1

postMessageでデータのやりとりについて

postMessage はオリジンを超える通信手段です。
オリジンを超える特徴は危険性もあるため、安易に質問するようなAPIではありません。

MDN postMessage にサンプルがあります。

必要に迫られる事例では、「リファレンスとそこに示されるサンプルから特徴を掴んで実装する」のが望ましいです。

---

ページBを開いた時に「Hello!」がconsoleに表示されることを期待して

双方のページで、メッセージ受信イベントハンドラに以下のような
console.log() を書きつつ実装するのが近道と思います。

window.addEventListener('message', function(event) {
  console.log( event.source );
  console.log( event.origin );
  console.log( event.data );
  // omitted
}, false);