Question

我在这里有一个简单的案例：

我使用window.open('http://remoteserver.com/success')在浏览器中打开一个窗口，如下所示：

const win = window.open('http://remoteserver.com/success')

现在，远程服务器发送如下HTML：

<!DOCTYPE html>
<html lang="en">
  <body>
  <div class="row text-center" style="margin-top:50px">
    Success!
    <button type="button" class="btn btn-primary" onclick="closeWindow()">Go Back</button>
  </div>
  </body>
  <script >
  function closeWindow(e)
  {
    this.close()
    console.log(e);
  }
  </script>
</html>

现在，当用户点击“返回”按钮时，它会显示一条警告，指出窗口只能由打开它的脚本关闭！

如何关闭此窗口？

Answer 1

您可以使用window.postMessage()将消息发布到父窗口，并在父窗口中收听消息并在收到消息时关闭窗口。

const win = window.open('http://example.com/success')
window.addEventListener('message', event => {
  // Only accept messages from http://example.com.
  if (event.origin === 'http://example.com') {
    if (data === 'close') win.close()
  }
})

HTML文件：

<!DOCTYPE html>
<html lang="en">
  <body>
  <div class="row text-center" style="margin-top:50px">
    Success!
    <button type="button" class="btn btn-primary">Go Back</button>
  </div>
  </body>
  <script>
    document.querySelector('button').addEventListener('click', () => {
      // Only send messages to http://example.com.
      window.opener.postMessage('close', 'http://example.com')
    })
  </script>
</html>

Answer 2

这是一项安全功能，因为脚本不应完全控制所有打开的窗口。从window.close()规范我们可以得到以下内容：

如果满足以下所有条件，则Window对象上的close（）方法应该关闭浏览上下文A：

相应的浏览上下文A可以通过脚本关闭。

现任设置对象指定的负责任浏览上下文熟悉浏览上下文A。

允许现任设置对象指定的负责任浏览上下文导航浏览上下文A。

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

您可以使用的一个解决方案是window.postMessage API（https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage），它以安全的方式启用跨源通信。基本上你做的是以下几点：

您的开场脚本会保留对已打开窗口的引用，并为传入的消息注册一个侦听器
当用户点击按钮时，打开的窗口的html会发送一个事件
打开窗口的脚本实际上以其侦听器方法关闭窗口

在代码中：

打开脚本

var popup = window.open("http://remoteserver.com/success", "_blank");
var receiveMessage = function (event) {
    if (event.data.indexOf("SUCCESS") !== -1 && event.origin.indexOf('.remoteserver.com') !== -1) {
        popup.close();
    }
};

window.removeEventListener("message", receiveMessage);

打开的窗口脚本

<!DOCTYPE html>
<html lang="en">
<body>
<div class="row text-center" style="margin-top:50px">
    Success!
    <button type="button" class="btn btn-primary" onclick="closeWindow()">Go Back</button>
</div>
</body>
<script >
function closeWindow(e)
{
    window.parent.postMessage('SUCCESS', 'http://localserver.com')
    console.log(e);
}
</script>
</html>

单击按钮

2 个答案: