window.postMessage()接收不到信息(失效)的解决办法
首先要理解下面的话
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 获取
demo
// 接收页
<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>