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为传输的信息
})