通过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',终于皇天不负有心人,上述代码完美解决困扰我两天的跨源传值的问题。先记录至此,有新的问题再更新。

相关推荐
汪子熙几秒前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员2 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特3 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
qiyue774 分钟前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程
namehu4 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
多啦C梦a6 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
bo521007 分钟前
解决跨域的几种种方法, 你都知道几种?
前端·面试·浏览器
拾光拾趣录7 分钟前
无状态协议下的用户状态管理:Web应用如何保持用户登录态
前端·http·https
架构个驾驾10 分钟前
用vue3,从0到1搭建一个移动端的项目(一)
前端