通过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 不同的网页)直接传值调用

一、 跨域传值

1、语法：

message

transfer 可选非必填

2、代码

2、跨源传值

一、跨域传值