原理：

PageA 通过 window.postMessage() 发送一个信息给 PageB，PageB 在 window 上添加一个事件监听绑定 message 事件可以接收到来自任何不同域名通过 postMessage 方法发送过来的信息，当 PageB 接收到 PageA 发送过来的信息时执行监听事件就 OK，在监听事件的 event 参数中包含了所有 message 事件接收到的相关数据。包括发送信息的内容 event.data，发送信息的域名 event.origin 等等。 同样的，在 PageA 内添加一个事件监听绑定 message 事件，在 PageB 内通过 postMessage 方法发送信息给 PageA 一样可以进行跨域通信

window.postMessage() 中的 window 到底是什么呢？


PageA 页面内嵌入 iframe PageB 页面

  • PageA 页面向 PageB 页面发送跨域信息，window 为 PageB 页面的 window，即 iframe.contentWindow。
  • PageB 页面向 PageA 页面发送跨域信息，window 为 PageA 页面的 window，即 top 或者 parent。

PageA 页面内代码使用 window.open() 打开 PageB 页面

  • PageA 页面向 PageB 页面发送跨域信息，window 为 var pageB = window.open('http://192.168.197.157:3000/pageB.html') 中的变量 pageB。
  • PageB 页面无法主动给 PageA 页面发送跨域信息，必须先接收到 PageA 页面发送过来的 message 然后再通过 event.source 发送给 PageA，没错… 此时的 window 就是 event.source，即 PageA 的 window

注意：

在 var targetPage = window.open('http://target.com') 打开新页面之后需要等到 [http://target.com](http://target.com) 页面加载完成之后才能进行 postMessage 跨域通信，但是在跨域的情况下我们是无法对 targetPage 进行 onload 事件监听的，所以这里只能做 延迟 setTimeout 或者 定时 setInterval 处理。 同样的，在页面内嵌入 iframe 页面的情况下，我们也需要等到页面内的 iframe 加载完成之后进行 postMessage 跨域通信

代码：

iframe方式

  1. // 父页面  'http://localhost:8080'
  3. <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
  4.      <div id="color">Frame Color</div>
  5. </div>
  7.  <div>
  8.      <iframe id="child" src="http://localhost:8087/index.html"></iframe>
  9.  </div>
  11.    <script type="text/javascript">
  13.        window.onload=function(){
  14.           window.frames[0].postMessage('getcolor','http://localhost:8000');
  15.         }
  17.        window.addEventListener('message',function(e){
  18.           var color=e.data;
  19.           document.getElementById('color').style.backgroundColor=color;
  20.      },false);
  21.    <script>
  1. // 子页面  'http://localhost:8000'
  4. <body style="height:100%;">
  6.   <div id="container" 
  7.           onclick="changeColor();" 
  8.           style="widht:100%; height:100%; background-color:rgb(204, 102, 0);"
  9.    >
  10.           click to change color
  11.   </div>
  13.    <script type="text/javascript">
  14.         var container=document.getElementById('container');
  16.         window.addEventListener('message',function(e){
  17.               if(e.source!=window.parent) return;
  18.                var color=container.style.backgroundColor;
  19.               window.parent.postMessage(color,'*');
  20.             },false);
  22.          function changeColor () {
  23.                var color=container.style.backgroundColor;
  24.                if(color=='rgb(204, 102, 0)'){
  25.                    color='rgb(204, 204, 0)';
  26.                }else{
  27.                  color='rgb(204,102,0)';
  28.                }
  29.               container.style.backgroundColor=color;
  30.              window.parent.postMessage(color,'*');
  31.            }
  32.     </script>
  34. </body>