iframe 跨域傳參

parent-index.html: （本地起服務，放在5000端口上）

<div class="content">
    <iframe src="http://localhost:5001/public/second.html" id="sendMessage" name="sendMessage" onload="resize()"></iframe>	
</div>
<script type="text/javascript">
//當前腳本
function resize() {
    var ifr = document.getElementById('sendMessage');
    //使用iframe的window向iframe發送message。
    ifr.contentWindow.postMessage("123", "http://localhost:5001");
    window.addEventListener('message', function (e) {
        alert('回傳 ' + e.data)
    })
}
</script>

child-second.html: （本地起服務，放在5001端口上）

<div class="content"> 
    <div id="howMuch">xxxxx</div>
</div>
<script type="text/javascript">
    window.addEventListener('message', receiver, false);
    function receiver(e) {
       if (e.data) {
           console.log(e)
           // 註釋掉的爲單次父子交互
           // var obj = {'name': 'qwer','age': 'xxx'}
           // e.source.postMessage(JSON.stringify(obj), e.origin);
           // console.log(e.data)
          document.getElementById('howMuch').onclick = function second() { 
              // 父子創建聯繫後，兒子html能夠經過點擊事件屢次主動向父親傳值
              var obj = {'name': 'qwer','age': 'xxx'}
              window.parent.postMessage(JSON.stringify(obj), 'http://localhost:5000')
          }
      } else {
         alert(e.data);
     }
}
</script>

.