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

相关推荐
ITfeib1 分钟前
Flutter
开发语言·javascript·flutter
想躺平的咸鱼干38 分钟前
Volatile解决指令重排和单例模式
java·开发语言·单例模式·线程·并发编程
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
Owen_Q1 小时前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·1 小时前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle2 小时前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构