admin管理员组

文章数量:1356852

I have a simple case here:

I use window.open('') to open a window in the browser like this:

const win = window.open('')

Now the remote server sends an HTML like this:

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

I have a simple case here:

I use window.open('http://remoteserver./success') to open a window in the browser like this:

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

Now the remote server sends an HTML like this:

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

  • javascript
  • html
  • dom
  • window
  • window.open
Share Improve this question edited Aug 22, 2016 at 14:47 Michał Perłakowski 92.8k30 gold badges163 silver badges187 bronze badges asked Aug 22, 2016 at 13:37 beNerdbeNerd 3,3746 gold badges59 silver badges95 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 7

You can use window.postMessage() to post a message to the parent window. 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./success')
window.addEventListener('message', event => {
  // Only accept messages from http://example..
  if (event.origin === 'http://example.') {
    if (event.data === 'close') popup.close()
  }
})

The HTML file:

<!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..
      window.opener.postMessage('close', 'http://example.')
    })
  </script>
</html>

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:

The close() method on Window objects should, if all the following conditions are met, close the browsing context A:

The corresponding browsing context A is script-closable.

The responsible browsing context specified by the incumbent settings object is familiar with the browsing context A.

The responsible browsing context specified by the incumbent settings object is allowed to navigate the browsing context 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.

One solution that you can use is the window.postMessage API (https://developer.mozilla/en-US/docs/Web/API/Window/postMessage) that enables cross-origin munication in a safe manner. Basically what you do is the following:

  1. Your opening script keeps a reference to the opened window and registers a listener for ining messages

  2. The opened window's html sends an event as soon as the user clicks the button

  3. The script which opened the window actually closes the window in its listener method

In code:

Opening script

var popup = window.open("http://remoteserver./success", "_blank");
var receiveMessage = function (event) {
    if (event.data.indexOf("SUCCESS") !== -1 && event.origin.indexOf('.remoteserver.') !== -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.')
    console.log(e);
}
</script>
</html>

本文标签： javascriptClose a window opened with windowopen() after clicking a buttonStack Overflow

版权声明：本文标题：javascript - Close a window opened with window.open() after clicking a button - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744004762a2574496.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。