跨网域传值的神队友——window.postMessage

最近公司的EIP专案有个需求。主管在签核一览表里会点击要签核的单子另开一个视窗，需求单位希望主管签完的当下马上自动更新一览表里的签核状态。

最简单的解法就是重整页面(window.load)，此时因为重打API就会得到更新後的签核状态。或是也可以直接用Angular的output去触发更新状态（我们公司的前端框架是用Angular）。但在这里除了要保留是一览表里的页数、搜寻条件等等，而且要签核的单子来自於不同的网域。因此，在这个机缘就认识了postMessage好朋友啦～

使用时机

需要跨网域传值时使用

基本写法

父视窗：

• window.open('子视窗的网址', 'blank');
• 接收到讯息後要做的动作

子视窗：

• 设定一个全域变数(ex:opener)
• window.opener.postMessage(要传送的值,’传给特定网址’)

程序码范例(以Angular为前端框架)

    // 父视窗- 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', '*'); // 更新一览表
            };
            };
        });
    }
    }

服用前的温馨提醒

1. 一定要从父视窗用 window.open() 的方式打开子视窗的页面，不然 postMessage is undefined 的错误讯息
2. 也可以传物件欧

 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