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

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>

猜你喜欢

转载自blog.csdn.net/qq_38132995/article/details/114524328