postMessage通信失效求助：跨域及同域均无法发送消息

我帮你看了下代码，问题主要出在origin的判断逻辑和消息发送时机上，具体来说：

1. 主页面的origin判断错误 #

e.origin 返回的是发送消息的页面的域名（协议+主机+端口），而不是完整的页面URL。你现在写的判断条件是和页面URL对比，肯定不匹配，导致消息被直接拦截了。

修正后的主页面代码：

<html>
<head></head>
<body>
    <iframe src="http://localhost/sandbox/test/test2.html"></iframe>
    <script>
        window.addEventListener("message", function (e) {
            // 这里只需要校验域名部分，比如http://localhost（如果有端口要加上，比如http://localhost:8080）
            if(e.origin !== 'http://localhost'){
                return;
            }
            alert(e.data);
        }, false);
    </script>
</body>
</html>

2. iframe页面的两个潜在问题 #

• 目标origin的准确性：postMessage的第二个参数是接收消息的页面的origin，也就是主页面的域名，同样应该用http://localhost而不是完整URL。
• 发送时机过早：如果iframe还没完全加载完成就调用top.postMessage，可能主页面的message事件还没绑定好，导致消息丢失。最好等iframe加载完成后再发送，或者给主页面一点绑定事件的时间。

修正后的iframe页面代码：

<html>
<head></head>
<body>
    <script>
        // 等待页面加载完成后发送消息
        window.onload = function() {
            // 第二个参数用主页面的域名，或者用'*'（不推荐，生产环境要严格指定origin）
            top.postMessage('hello', 'http://localhost');
        };
    </script>
</body>
</html>

额外注意事项 #

• 如果你的本地服务有端口号（比如http://localhost:3000），origin必须带上端口，否则校验不通过。
• 生产环境绝对不要用'*'作为目标origin，这会有安全风险，一定要指定明确的允许的域名。
• 可以在控制台打印e.origin和你判断的字符串，对比看看是否一致，方便排查问题。

内容的提问来源于stack exchange，提问作者Observer