window.postMessage()接收不到信息（失效）的解决办法
程序员文章站
2022-07-07 20:46:46
所有属性均已附带MDN链接，方便查阅最近在用postMessage做demo时候发现无论怎么都接收不到弹出页所发的消息，以为是弹出的方式有问题遂尝试改动了好几种弹出方式都不生效，最后查阅了MDN后发现标准的用法应当是otherWindow.postMessage(message, targetOrigin, [transfer]);//otherWindow//其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、//或者是命名过....
所有属性均已附带MDN链接，方便查阅
最近在用 postMessage 做demo时候发现无论怎么都接收不到弹出页所发的消息，以为是弹出的方式有问题遂尝试改动了好几种弹出方式都不生效，最后查阅了MDN后发现标准的用法应当是
otherWindow.postMessage(message, targetOrigin, [transfer]);
//otherWindow
//其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、
//或者是命名过或数值索引的window.frames。
关键其实在于 otherWindow 或者叫做 targetWindow 更加准确，是指你要发送信息的目标页面的window对象，直接 window.postMessage() 调用的当前窗口的window对象，相当于自己给自己发目标页当然接收不到了。
关于 targetWindow 的获取根据弹出方式不同分为两种
-
弹出iframe 使用 window.top 或者 window.parent 来获取，二者的区别在于 window.parent 返回当前窗口的直接父对象，而 window.top 返回最顶层的窗口对象。
-
window.open() 打开新窗口 使用 window.opener 获取
附上一个window.open() 方式弹出的例子，弹出iframe的方式写法大同小异因此不再赘述。
// 接收页
<body>
<a href="javascript:;" onclick="window.open('./message.html')">xxxx</a>
<script>
var readFlag = false;
window.addEventListener('message', function (e) {
console.log(e.data);
}, false)
</script>
</body>
// 发送页
<body>
<button class="btn">点击</button>
<script src="./myDialog.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var targetWindow = window.opener; // 获取打开此页面的window对象
$('.btn').click(function () {
//window.top用于iframe嵌套情况下寻找上级window对象
// window.top.postMessage({ readFlag: false }, '*')
targetWindow.postMessage({ readFlag: false }, '*')
})
</script>
</body>
本文地址：https://blog.csdn.net/amswait/article/details/107364186
推荐阅读
-
微信信息收不到是怎么回事（无法接收信息的2个原因及解决法）
-
微信怎么一键切换登录？微信切换登录与接收不到消息的原因与解决办法
-
window.postMessage()接收不到信息（失效）的解决办法
-
ipad隔空投送接收方没反应怎么办? ipad隔空投送接收不到的解决办法
-
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
-
CURL POST数据量过大，接收不到服务端的信息
-
CURL POST数据量过大，接收不到服务端的信息
-
关于PHP接收不到表单提交的POST信息
-
CURL POST数据量过大，接收不到服务端的信息
-
ipad隔空投送接收方没反应怎么办? ipad隔空投送接收不到的解决办法