众所周知,在vue中bus等工具只能跨组件通信,如何实现跨窗口通信呢?
场景如下,我们在A窗口中新开了B窗口,想在B窗口中调用A窗口的方法?
这里还总结了一点window事件的方法:
window.opener.location.reload() 这样关闭B窗口后会刷新整个A窗口,体验效果不是很好
window.onunload 在关闭窗口之后触发
window.opener 获取父页面的window元素
注:
1.window.opener 实际上就是通过window.open()打开的窗体的父窗体
2.window.opener.父页面中的方法();//调用父页面中的方法
location.reload() 刷新页面
window.close() 关闭window.open()打开的窗口
window.onbeforeunload 关闭窗口前执行事件
A窗口:
mounted() {
// 注:getBpageList是提供给新窗口B触发的,实际上触发的是A的getApageList方法
window["getBpageList"] = (params) => {
this.getApageLists(params);
};
methods: {
async getApageLists(){
let res = await getPageList()
......
},
//点击新打开一个窗口B
detailsView(data) {
window.open(`....../${data.id}`);
},
}
b窗口调用A窗口方法
注:具体场景可以很多,比如放在点击事件中,或者关闭窗口前等
methods:{
emitAwindow(){
//window.opener 获取父页面的window元素
//判断A窗口有没有window.opener和getBpageList是不是个方法
if (window.opener && window.opener.getBpageList) {
window.opener.getBpageList(params);
} else {
//window.opener.frames[0] 获取到的window对象
window.opener.frames[0].getBpageList(params);
}
}
}