window.open无法复用同名已打开窗口，如何实现复用？

我写了以下HTML代码，给4个元素（两个button、两个a标签）的window.open指定了相同窗口名称myWindow，预期点击第一个按钮打开新窗口后，点击第二个按钮会复用该窗口加载新链接，但实际每次点击都会打开新窗口，重复点击同一元素也会出现这个问题，偶尔才会随机复用窗口。Chrome、Edge、Firefox测试结果一致。

<button class="button" onclick="window.open('https://www.google.com','myWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Google</button>
<br /><br />
<button class="button" onclick="window.open('https://www.stackoverflow.com','myWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Stackoverflow</button>
<br /><br />
<a href="https://www.google.com" onclick="window.open('https://www.google.com','myWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Google</a>
<br /><br />
<a href="https://www.stackoverflow.com" onclick="window.open('https://www.stackoverflow.com','myWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Stackoverflow</a>

问题原因 #

核心问题在于每次调用window.open时都传入了窗口特性参数。浏览器的安全机制会判定：带有自定义特性参数的window.open请求，目标是创建新的定制化窗口，而非复用已存在的同名窗口——哪怕窗口名称完全一致，只要特性参数存在，浏览器就会优先新建窗口。

解决方案 #

方案1：全局记录窗口实例（保留自定义窗口样式） #

通过全局变量记录已打开的窗口实例，后续调用时直接复用该实例加载新URL，仅第一次创建时传递特性参数：

<script>
// 全局变量保存窗口实例
let myTargetWindow = null;

function openOrReuse(url) {
  if (myTargetWindow && !myTargetWindow.closed) {
    // 窗口未关闭，直接更新地址并前置窗口
    myTargetWindow.location.href = url;
    myTargetWindow.focus();
  } else {
    // 首次打开或窗口已关闭，创建新窗口并传递特性参数
    myTargetWindow = window.open(url, 'myWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500');
  }
}
</script>

<button class="button" onclick="openOrReuse('https://www.google.com'); return false;">Google</button>
<br /><br />
<button class="button" onclick="openOrReuse('https://www.stackoverflow.com'); return false;">Stackoverflow</button>
<br /><br />
<a href="https://www.google.com" onclick="openOrReuse('https://www.google.com'); return false;">Google</a>
<br /><br />
<a href="https://www.stackoverflow.com" onclick="openOrReuse('https://www.stackoverflow.com'); return false;">Stackoverflow</a>

方案2：移除特性参数（无需自定义窗口样式时使用） #

如果不需要定制窗口的工具栏、大小等特性，直接删除window.open的第三个参数，浏览器会自动复用同名窗口：

<button class="button" onclick="window.open('https://www.google.com','myWindow'); return false;">Google</button>
<br /><br />
<button class="button" onclick="window.open('https://www.stackoverflow.com','myWindow'); return false;">Stackoverflow</button>
<br /><br />
<a href="https://www.google.com" onclick="window.open('https://www.google.com','myWindow'); return false;">Google</a>
<br /><br />
<a href="https://www.stackoverflow.com" onclick="window.open('https://www.stackoverflow.com','myWindow'); return false;">Stackoverflow</a>

注意事项 #

• 窗口名称myWindow大小写敏感，必须完全一致；
• 如果用户手动关闭了复用窗口，下次点击会重新创建；
• 确保网站未被浏览器弹窗拦截机制限制，否则窗口可能无法正常打开或复用。

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