postMessage 基本用法及收不到数据原因、处理办法

window.postMessage() 方法可以安全地实现跨源通信

一 语法：

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

otherWindow

其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames (en-US)。
直白的说，就是接收消息的目标窗口

message

将要发送到目标窗口的数据, 原则上可以是任何类型，但是考虑到浏览器兼容性建议使用字符串，对象可以使用JSON.stringfy转换。[1]

targetOrigin

通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。

transfer 可选

是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

二 使用

向iframe元素发送数据

//在获取当前name属性为nextIframe的iframe元素的window，并发送postMessage，传递数据是一个json字符串，http://test.a.b 窗口可以i接受到数据
//方法1
window.frames["nextIframe"].postMessage(JSON.stringify({code:5}), "http://test.a.b");
//方法2
document.querySelector("iframe").contentWindow.postMessage(JSON.stringify({code:5}), "http://test.a.b");

iframe接收数据:

window.addEventListener("message",(e)=>{
	//处理逻辑,
	console.log(e.data)
	console.log(e.origin)
})

子向父传递数据

 window.parent.postMessage("nihao","*");

三 接收不到数据原因

1.otherWindow 获取的不对

获取父级窗口 ： window.parent
获取顶级窗口：window.top
获取iframe窗口：
document.querySelector(“iframe”).contentWindow
window.frames[“nextIframe”] 有name属性的iframe
获取window.open 打开窗口：
const newWindow = window.open()
window.opener //返回打开当前窗口的那个窗口的引用

2.动态加载的元素还没有完成dom加载

如iframe 可以使用iframe.onload()

const myIframe = window.frames["nextIframe"]
myIframe.onload = function(){
		myIframe.contentWindow.parent.postMessage(JSON.stringify({code:4}), "*");
 }