最近公司的EIP专案有个需求。主管在签核一览表里会点击要签核的单子另开一个视窗,需求单位希望主管签完的当下马上自动更新一览表里的签核状态。
最简单的解法就是重整页面(window.load),此时因为重打API就会得到更新後的签核状态。或是也可以直接用Angular的output去触发更新状态(我们公司的前端框架是用Angular)。但在这里除了要保留是一览表里的页数、搜寻条件等等,而且要签核的单子来自於不同的网域。因此,在这个机缘就认识了postMessage好朋友啦~
需要跨网域传值时使用
父视窗:
子视窗:
// 父视窗- list.ts
export class ListComponent implements OnInit, AfterViewInit {
// 打开表单
openSheet(link: string) {
window.open(link, '_blank');
}
// 接收到讯息後的动作- 写在全域变数
@HostListener('window:message', ['$event'])
onMessage(event: MessageEvent): void {
console.log('成功触发:查看event.data值:', event.data);
if (event.data === 'reload') {
console.log('通过判断,准备重刷表单资料getRowData()');
this.getData();
};
};
}
// 子视窗- ApprovePage.ts
export class ApprovePageComponent implements OnInit {
opener;
// 呼叫抽单API
callAbortAPI(type: string) {
this._ForgetDutyService.cancelApply(this.abortPara).subscribe(res => {
if (res.status === "打API成功") {
console.log(this.opener); // 检查opener真的有值
if (this.opener) {
window.opener.postMessage('reload', '*'); // 更新一览表
};
};
});
}
}
window.open()
的方式打开子视窗的页面,不然 postMessage is undefined
的错误讯息 window.opener.postMessage({data:'reload',status:'success'}, '*'); // 通知父视窗(更新一览表)
在纯JS使用=>
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
https://xyz.cinc.biz/2014/05/html5-postmessage-text.html
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/137962/
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
在Angular使用=>
https://www.tpisoftware.com/tpu/articleDetails/2077
<<: Unity自主学习(六):使用"Unity Installer"下载Unity
>>: D5 - 你不知道 Combo : 前菜 Hoisting
今天来介绍云端的管理,常常出现的三个名词,在先前的文章中,我应该也有使用过了一部分。这三个名词长的很...
参考文章:Element UI 上传档案 el-upload —— 手动上传档案,限制上传档案数量,...
前言 昨天我们设计好UI介面後, 我们有一堆按钮和文字框的"元件", 要让这些元...
一. LSTM的问题 LSTM虽然非常强大,但LSTM也是有一个问题,就是计算时间较久导致执行速度较...
昨天我们介绍完如何建立一个元件,今天就来介绍 PropTypes,让建立的元件更加的完整吧! Pro...