在iframe中使用postMessage解决跨域问题

在iframe中使用postMessage解决跨域问题

在iframe中向父页面发送消息时，子页面和父页面的http协议，域名，端口号任意一个不相同时会产生跨域问题，使用postMessage可解决这一问题。

父页面JS代码

window.onload = function() {
    window.addEventListener('message', function (e) {  // 监听 message 事件
    	console.log(e.data);
    });
}

子页面JS代码

//参数message:将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化
window.parent.postMessage(message, '*')

接收到的 message 的属性

message 的属性有:
data
从其他 window 中传递过来的对象。
origin
调用 postMessage  时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。
source
对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。