怎么使用postMessage进行通信

postMessage是window的方法，可以通过这个方法实现两个窗口之间的通信，总结下俩大概有两种类型

1.两个页面之间发送信息

/* page two */
....

  
page two
  

    
      open page one
    
   
    

...
/* end */

/* page one */
...

  
page one
  

...
/* end */

以上代码的意思是在page2中打开page1，并且在page1中通过postMessage向page2发送信息，page2页面通过绑定message事件获取page1发送过来的信息。

2.页面向页面中的iframe发送信息

/* main page */
...
page main


...
/* end */

/* sub page */
...
page sub

...
/* end */

上面代码的意思是给iframe发送信息，iframe接受信息，并在子页面中展示出来发送的信息

通过上边两个简单的例子可知，进行这种通信只需要简单的两个方法

第一步：分发消息，及把消息发送给相应的窗口
otherWindow.postMessage(message, targetOrigin, transfer);
otherWindow：你要发送消息给哪个窗口就是哪个窗口的引用，注意不是当前窗口，可以是iframe的窗口对象，或者是window.open返回的窗口对象。如果获取不到otherWindow是没法对相应的窗口发送信息的。
message：将要发送给otherWindow的数据。
targetOrigin：指定哪些窗口可以获取到发送的数据（可以使用“*”表示无限制）。
transfer：是一串和message 同时传递的Transferable对象，可选。

第二步：监听message事件，获取另一个窗口发送给当前窗口的信息
window.addEventListener('message', function, useCapture);
message：事件类型。
function: 'message'事件发生时调用的函数。
useCapture：布尔值，使用事件冒泡还是事件捕获，可选。

通过上面接单的两步就可以实现一个简单的通信