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

问题描述

按照正常的代码逻辑,应该是这个样子,通过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通信,必须要有父子关系才行,或者间接的父子关系才可以保持通信,比如上面的案例就是间接的父子关系

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值