凌晨不睡觉

V1

2022/10/26阅读:85主题:默认主题

window.postMessage()接收不到信息(失效)的解决办法

所有属性均已附带MDN链接,方便查阅

最近在用 postMessage[1] 做demo时候发现无论怎么都接收不到弹出页所发的消息,以为是弹出的方式有问题遂尝试改动了好几种弹出方式都不生效,最后查阅了MDN后发现标准的用法应当是

otherWindow.postMessage(message, targetOrigin, [transfer]);
//关键在于otherWindow
//其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、
//或者是命名过或数值索引的window.frames。

关键其实在于 otherWindow 或者叫做 targetWindow 更加准确,是指你要发送信息的目标页面的window对象,直接 window.postMessage() 调用的当前窗口的window对象,相当于自己给自己发目标页当然接收不到了。

关于 targetWindow 的获取根据弹出方式不同分为两种

  • 弹出iframe 使用 window.top[2] 或者 window.parent[3] 来获取,二者的区别在于 window.parent[4] 返回当前窗口的直接父对象,而 window.top[5] 返回最顶层的窗口对象。
  • window.open() 打开新窗口  使用 window.opener[6] 获取

附上一个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({ readFlagfalse }, '*')
        })
    
</script>
</body>

参考资料

[1]

postMessage: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

[2]

window.top: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/top

[3]

window.parent: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/parent

[4]

window.parent: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/parent

[5]

window.top: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/top

[6]

window.opener: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/opener

分类:

前端

标签:

JavaScript

作者介绍

凌晨不睡觉
V1