单击按钮后关闭用 window.open() 打开的窗口

Question

I have a simple case here:我这里有一个简单的案例：

I use window.open('http://remoteserver.com/success') to open a window in the browser like this:我使用window.open('http://remoteserver.com/success')在浏览器中打开一个窗口，如下所示：

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

Now the remote server sends an HTML like this:现在远程服务器发送这样的 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>

Now when a user clicks on the "go back" button, it shows a warning that windows can only be closed by a script who opened it!现在，当用户单击“返回”按钮时，它会显示警告，提示窗口只能由打开它的脚本关闭！

How do I close such window?我如何关闭这样的窗口？

Answer 1

You can use window.postMessage() to post a message to the parent window.您可以使用window.postMessage()向父窗口发布消息。 In the parent window, listen for new messages and close the window when you get a message with the correct data from the proper origin.在父窗口中，侦听新消息并在收到来自正确来源的具有正确数据的消息时关闭窗口。

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

The HTML file: 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

This is a security feature since scripts should not have full control over all open windows.这是一项安全功能，因为脚本不应完全控制所有打开的窗口。 From the window.close() spec we can get the following:从window.close()规范我们可以得到以下信息：

The close() method on Window objects should, if all the following conditions are met, close the browsing context A: Window 对象上的 close() 方法应该，如果满足以下所有条件，则关闭浏览上下文 A：

The corresponding browsing context A is script-closable.相应的浏览上下文 A 是脚本可关闭的。

The responsible browsing context specified by the incumbent settings object is familiar with the browsing context A.由现任设置对象指定的负责浏览上下文熟悉浏览上下文 A。

The responsible browsing context specified by the incumbent settings object is allowed to navigate the browsing context A.允许由现任设置对象指定的负责浏览上下文导航浏览上下文 A。

A browsing context is script-closable if it is an auxiliary browsing context that was created by a script (as opposed to by an action of the user), or if it is a top-level browsing context whose session history contains only one Document.如果浏览上下文是由脚本创建的辅助浏览上下文（而不是由用户的操作），或者如果它是会话历史记录仅包含一个 Document 的顶级浏览上下文，则该浏览上下文是脚本可关闭的。

One solution that you can use is the window.postMessage API ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ) that enables cross-origin communication in a safe manner.您可以使用的一种解决方案是window.postMessage API ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage )，它以安全的方式实现跨域通信。 Basically what you do is the following:基本上你要做的是以下内容：

Your opening script keeps a reference to the opened window and registers a listener for incoming messages您的打开脚本保留对打开窗口的引用，并为传入消息注册一个侦听器
The opened window's html sends an event as soon as the user clicks the button一旦用户单击按钮，打开的窗口的 html 就会发送一个事件
The script which opened the window actually closes the window in its listener method打开窗口的脚本实际上在其侦听器方法中关闭了窗口

In code:在代码中：

Opening script打开脚本

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);

Opened window script打开的窗口脚本

<!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>

单击按钮后关闭用 window.open() 打开的窗口

问题描述

2 个解决方案

解决方案1
7 已采纳 2016-08-22 13:47:48

解决方案2
0 2016-08-22 13:56:54

单击按钮后关闭用 window.open() 打开的窗口

问题描述

2 个解决方案

解决方案1 7 已采纳 2016-08-22 13:47:48

解决方案2 0 2016-08-22 13:56:54

解决方案1
7 已采纳 2016-08-22 13:47:48

解决方案2
0 2016-08-22 13:56:54