我这里有一个简单的案例:
我使用 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>
现在，当用户点击“返回”按钮时，它会显示一条警告，提示窗口只能由打开它的脚本关闭!
如何关闭这样的窗口？
最佳答案
您可以使用 window.postMessage()将消息发布到父窗口。在父窗口中，监听新消息并在收到来自正确来源的包含正确数据的消息时关闭窗口。
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()
}
})
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>
关于javascript - 单击按钮后关闭使用 window.open() 打开的窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39081098/