如何在Internet Explorer 11中从window.open返回值？解决postMessage回调失效问题

我之前也踩过IE11和postMessage配合window.open的坑！你遇到的问题其实是IE11对标准事件绑定和消息传递的兼容限制导致的，下面给你详细分析和解决办法：

问题复现代码 #

先确认你的基础代码（已整理为标准格式）：

index.html（父窗口） #

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
</head> 
<body> 
    <p>Click the button to open a new browser window.</p> 
    <p id="message"></p> 
    <button onclick="myFunction()">Try it</button> 
    <script> 
        var messageEle = document.getElementById('message'); 
        function receiveMessage(e) { 
            messageEle.innerHTML = "Message Received: " + e.data; 
        } 
        window.addEventListener('message', receiveMessage, false); 
        function myFunction() { 
            window.open("child.html", "test", "top=500,left=500,width=400,height=400"); 
        } 
    </script> 
</body> 
</html>

child.html（子窗口） #

<!DOCTYPE html> 
<html> 
<body> 
    <p>Child Window</p> 
    <a href="javascript:;" onclick="sendMessage()">Send Message</a> 
    <script> 
        function sendMessage(){ 
            window.opener.postMessage("test", "*"); 
            window.close(); 
        } 
    </script> 
</body> 
</html>

问题根源 #

IE11虽然表面支持addEventListener，但在message事件的处理上存在兼容性bug；另外直接用*作为目标源加上窗口立即关闭的操作，会导致IE11无法正确捕获到消息。

修复方案 #

1. 兼容IE11的事件绑定方式 #

把父窗口的事件监听改成同时支持标准浏览器和IE11的版本：

var messageEle = document.getElementById('message');
function receiveMessage(e) {
    messageEle.innerHTML = "Message Received: " + e.data;
}

// 兼容IE11的事件绑定逻辑
if (window.addEventListener) {
    window.addEventListener('message', receiveMessage, false);
} else {
    // IE8-11专属的attachEvent方法
    window.attachEvent('onmessage', receiveMessage);
}

2. 指定具体的消息目标源+延迟关闭窗口 #

避免用*这种通配符，改用父窗口的实际origin（既安全又能触发IE11的消息接收机制），同时延迟关闭窗口确保消息发送完成：

// 子窗口sendMessage函数修改
function sendMessage(){
    // 用父窗口的location.origin作为目标源
    window.opener.postMessage("test", window.opener.location.origin);
    // 延迟100ms关闭窗口，确保消息发送流程完成
    setTimeout(function(){
        window.close();
    }, 100);
}

3. 确保X-UA-Compatible设置正确 #

确认父窗口的X-UA-Compatible meta标签处于启用状态，不要注释掉：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

验证效果 #

修改完之后，在IE11里点击按钮打开子窗口，点击发送消息，父窗口应该能正常接收到消息并显示了。

内容的提问来源于stack exchange，提问作者Muhammad Faizan Uddin