本文主要是介绍通过postMessage进行跨域（同源同 IP但是端口不同）、或者跨源(两个页面 IP 不同的网页)直接传值调用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、 跨域传值
1、语法：
当使用 iframe 跨域传值时，父子页面之间的 postMessage 的语法为：
window.parent.postMessage(message, targetOrigin, [transfer]);
message
将要发送到目标窗口的数据, 原则上可以是任何类型，但是考虑到浏览器兼容性建议使用字符串，对象可以使用JSON.stringfy转换。
targetOrigin
通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。
transfer 可选非必填
是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
2、代码
父页面中需要定义如下message监听：
window.addEventListener('message', function (e) { //无法解决不同源之间的通信var message = e.data;//处理逻辑,console.log(e.data)console.log(e.origin)if (e.origin == originIP ) {//判断消息来源，校验子页面的 IP 地址openIframe(message);}}, false);//处理接收后的 js方法
function openIframe(openIframe){//相关代码段
}
父页面向 iframe 子页面 传输参数如下：
//在获取当前子页面iframe元素的window，并发送postMessage，传递数据是一个json字符串，http://test.com 窗口可以i接受到数据
//方法1
window.frames["iframeName"].postMessage(JSON.stringify({code:5}), "http://test.com"); //[]中的参数为iframe的 name 为iframeName
//方法2
document.querySelector("iframe").contentWindow.postMessage(JSON.stringify({code:5}), "http://test.com");
子页面中需设置消息传输动作，代码如下：
window.parent.postMessage("nihao","*");//如果知道明确的接收窗口，*建议更改为具体的地址，如：htt://abc.com以上为跨域传值的相关代码。
2、跨源传值
跨院传值中子页面向父页面传输的方式一样，无需更改，唯一要改的是父页面的接收 message 的监听方法，使用window.onmessage(function(){})方法，代码如下：
window.onmessage = (event) => {var message = event.data;if (event.origin == reportIP && ) {openIframe(message);}};//处理接收后的 js方法
function openIframe(openIframe){//相关代码段
}
终于搞定！！
刚开始我一直按跨域的方法解决，无论如何也传不了值到父页面，一直报错：Failed to execute 'postMessage' on 'DOMWindow'，终于皇天不负有心人，上述代码完美解决困扰我两天的跨源传值的问题。先记录至此，有新的问题再更新。
这篇关于通过postMessage进行跨域（同源同 IP但是端口不同）、或者跨源(两个页面 IP 不同的网页)直接传值调用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
