在打开的窗口中单击链接时 window.close 失败

Question

我正在使用 window.open() 打开一个新窗口。如果我在这个页面上什么都不做，然后点击“关闭窗口”链接，窗口就会关闭。这完美地工作；但是，如果我在页面之间导航（都在同一个域下） window.close() 不再起作用。

有没有办法解决这个问题？

这是我在此示例中打开页面的方式...

<a href="###" target="_blank">

这是我的关闭链接：

<a href="javascript:void(0)" onclick="window.close()">close</a>

我使用 2 种方法在打开的窗口中更改页面。

<select onchange="if (this.value) window.location.href=this.value"> 和标准<a href="####"> 标签

我是否需要以某种方式在此窗口中导航链接才能保持我的window.close() 能力？

Answer 1

如果您想使用window.close() 关闭一个新窗口，您应该倾向于使用window.open() 打开一个新窗口。例如

<script>
  function newWindow() {
    window.open('foo.html', 'myWindow'); 
    return false;
  }
</script>
  
<a href="foo.html" onclick="return newWindow()">link</a>

来自MDN：

Window.close() 方法关闭当前窗口或调用它的窗口。此方法只能在由脚本使用 Window.open() 方法打开的窗口上调用。如果窗口不是由脚本打开的，则控制台中会出现类似于此的错误：Scripts may not close windows that were not opened by script。

我了解您所描述的行为，只要您不导航，您就可以在哪里关闭窗口。我可以在 Google Chrome 中复制它。

我相信这是因为（来自the spec）：

如果浏览上下文是由脚本创建的辅助浏览上下文（而不是通过用户的操作），则浏览上下文是脚本可关闭的，或者如果它是其会话的顶级浏览上下文历史记录只包含一个Document。

您的新窗口被视为“顶级浏览上下文”，而不是“辅助浏览上下文”。在您导航之前，历史记录包含一个文档，因此可以使用window.close() 关闭。一旦您导航，历史记录就有多个文档，因此关闭窗口无效。

---

您还应该了解window.opener 及其带来的安全风险。

window.opener 提供对打开当前窗口的window 对象的引用。

最近的建议是在新窗口中打开的所有链接上使用rel="noopener"。同样，这是因为在不知道您在做什么的情况下设置 window.opener 会带来安全风险。在这里阅读它：

Links to cross-origin destinations are unsafe

浏览器现在开始将所有target="_blank" 链接视为已设置rel="noopener"，即使您作为开发人员没有设置它。你可以看到this is now in most major browsers。

因此，您可以使用<a href="#" target="_blank" rel="opener">link</a>（明确设置window.opener），我认为您会得到您想要的行为。但是，这在浏览器之间可能不可靠，并且还具有 web.dev 文章中所述的安全隐患。