父子页面跨域通讯

postMessage

简介

该window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。

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

targetWindow

• Window.open：返回打开的窗口对象
• Window.opener：打开窗口内调用，返回源窗口对象
• HTMLIFrameElement.contentWindow：用于向嵌入的iframe页面传递信息
• Window.parent：iframe向父页面传递信息

message

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

targetOrigin

指定要调度的事件的targetWindow的原点，可以是文字字符串"*"（表示没有首选项），也可以是URI。如果在计划调度事件时，targetWindow文档的方案，主机名或端口与targetOrigin提供的内容不匹配，则不会调度该事件；只有当所有的三个条件都匹配时，将调度该事件。该机制可以控制发送消息的位置；例如，如果postMessage()用于传输密码，则该参数必须是URI，其来源与包含密码的消息的预期接收者相同，以防止恶意第三方拦截密码。始终提供具体的targetOrigin，而不是 " * "，如果您知道其他窗口的文档应该位于何处。未能提供特定目标会泄露您发送给任何感兴趣的恶意站点的数据。

transfer

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

使用实例

open window 通讯

// open window
var newWindow = window.open("http://127.0.0.1");

newWindow.postMessage({
  msg: "源窗口向打开的窗口发送消息"
},'*');

window.opener.postMessage({
  msg:"打开的新窗口向源窗口发送消息"
},'*');

iframe通讯

// iframe
window.parent.postMessage({
  msg:"iframe 向父窗口发送消息"
},'*');

iframeDom.contentWindow.postMessage({
  msg:"父窗口向iframe发送消息"
},'*');

监听

window.addEventListener('message', function(e){
  // e.data为传输的信息
})