所有属性均已附带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>
window.addEventListener('message', function (e) {
console.log(e.data);
}, false)
</script>
</body>
// 发送页
<body>
<button class="btn">点击</button>
<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>
4067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
