子 postMessage 的父接收者始终为空白答案

【问题标题】：Parent receiver of child postMessage is always blank子 postMessage 的父接收者始终为空白
【发布时间】：2021-02-10 00:02:49
【问题描述】：

我有一个父网页：www.tablesandlegs.co.uk:8080，它会打开一个通往子网页的新窗口：www.new.tablesandlegs:8085。我可以很容易地将消息发送到子页面但是当我尝试发送回时，我可以看到我的 eventListener 被调用，但内容是空的：

家长：

function loadNewSite() {
    var popup = window.open('www.new.tablesandlegs.co.uk:8080/tables');

    setInterval(() => {
        popup.postMessage('Testing 123', '*'); // I see this interval in the child window browser log
    }, 5000);
}

window.addEventListener('message', message_receive, false);

function message_receive(evt) {
    console.log('event', evt);  // <--- i see this from click in child
    console.log(evt);      // <--- this is empty
}

孩子：

public parentWindow: any;

ngOnInit() {

window.addEventListener('message', (event) => {

    if(event.origin.includes('new') {
        return;
    }
    else {
        console.log('from parent', event); // see logs from parent interval
        this.parentWindow = event;
    }
}

}

public clicked() {

    this.parentWindow.source.postMessage('you clicked something, this.parentWindow.origin);

}

当我单击 html 上的 btn 时，我可以看到在子弹出窗口中调用 clicked() 并且父项中的 console.log('event'); 已记录，但后续 console.log(evt) 始终为空白；

已尝试从孩子发送给父母：

JSON.stringify()
{'test': 'msg'}

都没有运气

注意，许多教程都建议可能需要 iFrame？这是绝对必要的吗？

【问题讨论】：

不明白为什么这需要 iframe，developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 没有提到类似的内容，但明确指出它也应该在父窗口/弹出窗口上下文中工作。您是否尝试过使用window.opener 获取对弹出窗口父级的引用，而不是通过事件源？
@CBroe 是的，我认为它应该在没有 iFrame 的情况下工作，尤其是 parent > child postMessage 工作正常。试过window.opener，结果一样。空evt。

标签： javascript cross-domain postmessage

【解决方案1】：

1.在事件子窗口向其父窗口发送消息时，您忘记了消息上的引号

在父窗口中：

window.addEventListener('message', (evt) => message_receive(evt), false);

【讨论】：