使用HTML5中window.postMessage进行页面间通信

window.postMessage虽然是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。window.postMessage是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。

发送数据：

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow

targetWindow是对接收消息的窗口的引用。获得该引用的方法包括：

1. Window.open （生成一个新窗口然后引用它）
2. Window.opener （引用产生这个的窗口）
3. HTMLIFrameElement.contentWindow（从其父窗口引用嵌入式）
4. Window.parent（从嵌入式内部引用父窗口）
5. Window.frames +索引值（命名或数字）

message

message就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。

targetOrigin

targetOrigin就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“*”或URI。 *表示任何目标窗口都可接收，为安全起见，请尽量要明确填写接收方的URI。

transfer（可选参数）

是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端，并且它们在发送端不再可用

接收数据：

const receiveMessage = (event) => {
    // 处于安全考虑，在接到信息之后最好使用event.origin来判断消息来源，同时可以使用event.source来建立双向通信
};
window.addEventListener("message", receiveMessage, false);

event对象有三个属性比较关键，分别是origin，data和source。
event.data表示接收到的消息。
event.origin表示postMessage的发送来源，包括协议，域名和端口。
event.source表示发送消息的窗口对象的引用。

因为必须获得对目标窗口的引用，所以window.postMessage只能单对单进行通信，但可以跨域是个非常大的优势。