js中window相关属性和方法
window.opener 实际上是通过window.open()打开的窗体的父窗体
window.close() 关闭window.open()打开的窗口
vue中window窗口通信
父窗口为a页面，子窗口为b页面
操作流程图如下：
- a页面
<template>
<div>
a页面,我是父窗口
<el-button type="primary" @click="go">打开子页面</el-button>
</div>
</template>
<script>
export default {
name: 'A',
data() {
return {
};
},
mounted() {
//给父窗口绑定一个数据
window.myData = {name: 'jerry',age: 6}
//给父窗口绑定一个方法
window.getChildData = (data) => {
console.log('接受子窗口数据：', data)
}
},
methods: {
go(){
window.open('http://localhost:81/zh/b', "payWindow", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
},
};
</script>
- b页面
<template>
<div>
a页面,我是子窗口
<el-button type="success" @click="closeWin">关闭窗口</el-button>
</div>
</template>
<script>
export default {
name: 'B',
data() {
return {
};
},
mounted() {
//获取父窗口的中数据
console.log('获取父窗口的中数据：', window.opener.myData)
},
methods: {
closeWin(){
//向父窗口发送数据
window.opener.getChildData({name: 'linda',age: 8}) //window.opener代表父窗口对象
//关闭当前窗口
setTimeout(() => {
window.close()
}, 2000);
}
},
};
</script>
设置子窗口居中
- 父窗口
let win = window.open('http://localhost:81/zh/b?name=tom&age=18', "payWindow", `toolbar=yes, location=no, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=${width}, height=${height}`);
//设置窗口居中
let left = (screen.availWidth - width) / 2
let top = (screen.availHeight - height) / 2
win.moveTo(left, top);
子窗口获取父窗口路径参数
- 父窗口
window.open('http://localhost:81/zh/b?name=tom&age=18', "payWindow", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
- 子窗口
//接收路径参数
const p = new URLSearchParams(window.location.search)
console.log('b页面close',p.get('name'),p.get('age'))