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?
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 02 Answers
Reset to default 7You 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:
Your opening script keeps a reference to the opened window and registers a listener for ining messages
The opened window's html sends an event as soon as the user clicks the button
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>