使用postMessage来实现父子通信跨域

最新推荐文章于 2025-06-24 10:14:27 发布

原创

最新推荐文章于 2025-06-24 10:14:27 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了如何利用postMessage方法进行父子窗口之间的跨域通信，详细讲解了子向父通信和父向子通信的过程，并给出了具体的代码示例。在实际应用中，需要注意子向父通信时源可以设为'*'，而父向子通信时源需指定为子页面的实际源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用postMessage来实现父子通信跨域

1.子向父通信

parent.html

window.addEventListener('message',function(e){
        console.log(e.data);
        if(e.data.msg==='xxx'){
                //一些自己的业务逻辑
            }
});

child.html

window.parent.postMessage({
         msg:"xxx"
},'*');

2.父向子通信

parent.html

var myframe = document.getElementById('myframe');//获取iframe
myframe.contentWindow.postMessage({data:'parent'},childDomain);//childDomain是子页面的源（协议+主机+端口号）

child.html

window.addEventListener('message', function(e){
      console.log(e.data.data);
})

注意：
1.子向父，子postMessage,父监听message;
2.父向子，父postMessage,子监听message;
3.测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)

测试代码部分：