beN*_*erd 1 html javascript dom window window.open
我这里有一个简单的案例：
我用来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>
| 归档时间： |
|
| 查看次数： |
3850 次 |
| 最近记录： |