（转）postMessage的使用

页面a（展示页）http://localhost:3000 a.html

 

<iframe id="child" src="http://localhost:3001"></iframe>

取到iframe元素

 

第一种： var frame = window.frames[0]; 第二种： var frame = document.getElementById('child').contentWindow

调用postMessage方法 发送信息

 

frame.postMessage('发送信息data', 'http://localhost:3001');

调用postMessage时，会触发页面a和页面b的message事件，调用callbackFunction函数，

 

window.addEventListener('message’, callbackFunction, false);

callbackFunction的参数.png

页面b（子页面 第三方）http://localhost:3001

 

window.addEventListener('message', callbackFunctionB, false);

这里的callbackFunctionB的返回值

 

callbackFunctionB的参数.png

如果你还想发一些回复的消息

 

window.parent.postMessage(‘回复信息', 'http://localhost:3000/');

---

postMessage(data,origin)方法接受两个参数

data:要传递的数据，

html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

origin：字符串参数，指明目标窗口的源

协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，someWindow.postMessage()方法只会在someWindow所在的源(url的protocol, host, port)和指定源一致时才会成功触发message event，当然如果愿意也可以将参数设置为"*"，someWindow可以在任意源，如果要指定和当前窗口同源的话设置为"/"。

链接：https://www.jianshu.com/p/7c4f3f7154f1