window.postMessage()接收不到信息（失效）

码农桃子

已于 2023-04-18 16:45:26 修改

阅读量5.3k

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言

于 2023-04-18 16:30:35 首次发布

本文链接：https://blog.youkuaiyun.com/QQ727338622/article/details/130224848

版权

前端专栏收录该内容

34 篇文章

订阅专栏

文章讲述了在iframe之间进行通信时遇到的问题及解决方案。当两个iframe需要通信而无法直接使用window.onmessage时，可能是window对象获取错误。建议检查iframe的位置并尝试让接收端监听父窗口。同时，提到postMessage通信必须基于父子或间接父子关系。在某些情况下，即使双方页面可修改，也无法避免使用parent进行通信。

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

问题描述

按照正常的代码逻辑，应该是这个样子，通过iframe打开子窗口，能够正常通信。

// 接收端（父窗口）
window.onmessage = function (e) {
	// 逻辑代码	
}

// 发送端（子窗口）
window.parent.postMessage({}, "*")

查找原因

那么现在无法通信的话，最可能出现的问题就是windows对象获取的不对，比如我项目中，其实是2个iframe在通信，按照上面的通信方式，无法直接监听到。
在这里插入图片描述
所以，我们可以先通过F12看一下2个通信窗口的位置，确保位置正确，再决定使用什么window对象

解决方法：

由于我这里的子窗口调用的是其他公司的页面，所以就不让他们改了。直接让接收端监听父窗口，这样他俩就在同一频道交流了，就可以解决问题。

// 接收端（父窗口）
window.parent.onmessage = function (e) {
	// 逻辑代码
}

// 发送端（子窗口）
window.parent.postMessage({}, "*")

通过百度发现了一些东西

弹出iframe：使用 window.top 或者 window.parent 来获取
window.open() ：打开新窗口使用 window.opener 获取

那么有人可能会问了，如果父子页面都是自己写的，自己方便改，能不能不通过parent进行通信呢？
答案也是不能，具体原因不知道，因为我尝试了一下，结果不行。
我认为这个postMessage通信，必须要有父子关系才行，或者间接的父子关系才可以保持通信，比如上面的案例就是间接的父子关系