本文主要是介绍postMessage解决跨域、消息传递（平台嵌入其他项目，需要相互发送接受消息），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
使用背景：其他平台嵌入到自己项目平台上，使用iframe做嵌套，但是涉及到进来免登录以及跨域问题，使用postMessage发送信息。
想要使用 postMessage 实现跨域通信和页面间数据通信，只要记住 window 提供的 postMessage 方法和 message 事件。
1、发送消息：
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗口的一个引用。比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message
要发送的消息。它将会被结构化克隆算法序列化，所以无需自己序列化，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化。
targetOrigin
“目标域“。URI（包括：协议、主机地址、端口号）。若指定为”*“，则表示可以传递给任意窗口，指定为”/“，则表示和当前窗口的同源窗口。当为URI时，如果目标窗口的协议、主机地址或端口号这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会发送。
2、接收消息
如果指定的源匹配的话，那么当调用 postMessage() 方法的时候，在目标窗口的Window对象上就会触发一个 message 事件。
获取postMessage传来的消息：为页面添加onmessage事件。
window.addEventListener('message',function(e) {var origin = event.origin;// 通常，onmessage()事件处理程序应当首先检测其中的origin属性，忽略来自未知源的消息if (origin !== "http://example.org:8080") return;// ...
}, false)event 的属性有：
data: 从其他 window 传递过来的数据副本。
origin: 调用 postMessage 时，消息发送窗口的 origin。例如：“http://example.com:8080”。
source: 对发送消息的窗口对象的引用。可以使用此来在具有不同 origin 的两个窗口之间建立双向数据通信。
小demo参考下：
http://www.domain1.com/a.html
<iframe id="iframe" src="http://www.domain2.com/b.html"></iframe><script>
var iframe = document.getElementById('iframe');iframe.onload = function() {// 向domain2发送跨域数据iframe.contentWindow.postMessage('来自domain1的消息', 'http://www.domain2.com');//或 window.frames[0].postMessage('来自domain1的消息', 'http://www.domain2.com');
};// 接受domain2返回数据
window.addEventListener('message',(e) => {console.log(e.data);
}, false);
</script>http://www.domain2.com/b.html
<script>
// 接收domain1的数据
window.addEventListener('message',(e) => {console.log(e.data);if(e.origin !== 'http://www.domain1.com') return;// 发送消息给domain1window.parent.postMessage('来自domain2的消息', e.origin);// 或 window.top.postMessage('来自domain2的消息', e.origin);// 或 e.source.postMessage('来自domain2的消息', e.origin);
}, false);
</script>项目真实使用：
index.vue
<template><div><iframeid="yhPage"src="http://192.168.5.58:8002/#/user/login"sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"allow="payment"frameborder="0"orgin="*"style="width: 100vw; height: 100vh"></iframe></div>
</template><script>
export default {data() {return {isShow: false,};},created() {const YHData = JSON.parse(localStorage.getItem("YHData"));// send data to yhsetTimeout(() => {document.getElementById("yhPage").contentWindow.postMessage({data: YHData,},// 与iframe嵌套的地址一致"http://192.168.5.58:8002");}, 500);//setTimeout(() => {this.isShow = true;}, 600);},
};
</script>
嵌入项目组要接收数据：
login.vue页面
created(){window.addEventListener('meaasge', e=>{console.log('fff')if(e.origin.indexOf(9095) > -1){// 处理接收到的数据console.log(e.data)}})}
这篇关于postMessage解决跨域、消息传递（平台嵌入其他项目，需要相互发送接受消息）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
