window.open指定name后，打开谷歌搜索页再点链接会新开窗口的问题

我需要实现这样的功能：点击链接在新窗口打开页面，当窗口已经打开时，点击新链接会在该窗口重载新URL。

通过给window.open指定特定的target（名称），多数网站都能正常实现这个功能，但打开谷歌搜索页后，再点击其他链接会弹出新窗口。

现象重现步骤 #

• 点击「Open w3school」，打开新窗口（符合预期）
• 点击「Open React」，在已打开窗口中重载页面（符合预期）
• 点击「Open google search」，在已打开窗口中重载页面（符合预期）
• 点击「Open w3school」，新开窗口（不符合预期）

复现代码 #

<html>
<body>

<p>Click the button to open a new browser window.</p>

<button onclick="openW3school()">Open w3school</button>
<button onclick="openGoogleSearch()">Open google search</button>
<button onclick="openReact()">Open React</button>

<script>
function openW3school() {
  window.open("https://www.w3schools.com", "mywindow", "popup");
}

function openGoogleSearch() {
  window.open("https://www.google.com/search?q=javascript", "mywindow", "popup");
}

function openReact() {
  window.open("https://reactjs.org/", "mywindow", "popup");
}

</script>

</body>
</html>

请问这种行为的原因是什么？

这种现象是浏览器同源策略结合谷歌的安全防护设置共同导致的：

1. 正常站点的复用逻辑：当打开w3school或React官网时，虽然这些站点和你的页面跨源，但它们没有主动切断父页面（你的页面）对新窗口的引用。浏览器允许你的页面通过指定统一的target名称（mywindow）复用已打开窗口——因为浏览器还能识别到这个target对应的窗口存在，且父页面没有失去关联。

2. 谷歌页面的特殊处理：谷歌搜索页面加载完成后，会主动执行window.opener = null的操作，直接切断父页面与该窗口的引用关联。同时根据浏览器的同源策略，你的页面无法访问跨源窗口的任何属性，这就导致你的页面彻底失去了对这个名为mywindow的窗口的控制权。

3. 后续打开的行为变化：当你再次点击按钮调用window.open时，浏览器无法找到之前的mywindow窗口（因为你的页面已经无法定位到它），所以会默认新建一个窗口加载目标页面，而非复用原有窗口。

内容的提问来源于stack exchange，提问作者lasse.iver