<div>
<h1>window.open</h1>
<button onclick="opentUrl()">弹出</button>
<button onclick="openChildren()">弹出子窗口</button>
<button onclick="closeChildren()">关闭子窗口</button>
</div>
// 打开链接
function opentUrl() {
window.open('https://www.baidu.com', 'baidu')
}
let child; //打开子窗口返回的BrowserWindowProxy对象 BrowserWindowProxy---操纵子窗口的类
// 打开子窗口
function openChildren() {
child = window.open('child1.html', 'child')
}
// 接受子窗口传递的数据
window.addEventListener('message', (msg) => {
console.log('msg', msg.data)
})
// 关闭子窗口
function closeChildren() {
child.close();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
这是子窗口
</h1>
<button onclick="sendDataToParent()">to Parent</button>
</body>
<script>
// 像父窗口传递参数
function sendDataToParent(){
window.opener.postMessage({
id:1,name:'121212'
})
}
</script>
</html>
网友评论