postMessage

页面a(展示页)http://localhost:3000
a.html


取到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);
postMessage_第1张图片
callbackFunction的参数.png

页面b(子页面 第三方)http://localhost:3001

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

这里的callbackFunctionB的返回值


postMessage_第2张图片
callbackFunctionB的参数.png

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

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

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

  1. data:要传递的数据,

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

  1. origin:字符串参数,指明目标窗口的源

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

你可能感兴趣的:(postMessage)