Edge浏览器中window.open返回子窗口引用为null的解决方法

这是个挺常见的Edge兼容性小坑，我来帮你一步步解决～

首先先指出你代码里的一个小错误——这个错误其实在所有浏览器里都会出问题：你把myArr定义成了数组，却用myArr.chidlWindowHandle去访问里面的对象属性，数组是需要通过索引访问元素的，正确写法应该是myArr[0].chidlWindowHandle，这个先改过来，不然哪怕在Chrome里也只是巧合能拿到预期结果。

接下来回到Edge返回null的问题，主要有两个核心原因和对应的解决方案：

1. Edge的弹窗加载时机与跨源限制 #

Edge对跨源窗口的引用处理比Chrome/Firefox更严格，当你打开外部域名的窗口时，可能子窗口还没完成初始化，window.open返回的引用就暂时是null。这时候我们可以监听子窗口的load事件，确保窗口加载完成后再存储和访问引用：

var myUrl = "https://www.google.com";
var myArr = [];
var childWin = window.open(myUrl, '_blank');

// 先判断弹窗是否被成功打开（没被拦截）
if (childWin) {
  // 监听子窗口加载完成事件
  childWin.addEventListener('load', function() {
    myArr.push({chidlWindowHandle: childWin});
    // 修正数组访问方式
    console.log(myArr[0].chidlWindowHandle);
  });
} else {
  console.log("弹窗被拦截了，请在浏览器设置中允许当前网站的弹窗权限");
}

2. Edge的弹窗拦截机制 #

如果上述方法还是不行，大概率是Edge默认拦截了你的弹窗。你需要：

• 检查Edge地址栏右侧的弹窗拦截图标，点击后允许当前网站的弹窗
• 或者在Edge设置中，找到「隐私、搜索和服务」→「弹出窗口和重定向」，把当前网站添加到允许列表

额外说明 #

如果子窗口是你自己可控的域名（不是google这种外部域名），还可以通过postMessage API在父窗口和子窗口之间安全通信，这样即使跨源也能稳定交互。但如果是外部域名，就只能依赖上述的加载监听和弹窗权限设置了。

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