交叉消息网络视图和多个窗口答案

【问题标题】：Cross messaging webview & multiple windows交叉消息网络视图和多个窗口
【发布时间】：2013-08-07 06:46:36
【问题描述】：

我正在开发一个打包的应用程序，如下：

窗口 1:: 有一个 webview，其中一个 postMessage 方法用于 webview 和窗口之间的通信。

是否可以将消息从（窗口 1）中的 Webview 发送到与其所在的父窗口不同的窗口（即窗口 2）？！或者其他方式，后台脚本可以监听postMessage吗？

我尝试从 Webview 的页面中使用 appWindow.source，但无法管理它。可能吗？有什么想法吗？

【问题讨论】：

标签： webview google-chrome-app postmessage

【解决方案1】：

您可以从 webview 向窗口发送消息，然后该窗口能够向 window2 发送消息。

https://github.com/GoogleChrome/chrome-app-samples/tree/master/messaging

【讨论】：

我知道这种方法，但我希望 Window2 直接接收从 Window1 发送到 webview（在同一窗口中）的数据。

【解决方案2】：

您可以使用chrome.runtime.sendMessage 和chrome.runtime.onMessage 将从webview 收到的消息广播到其他窗口。

因此，具有 webview 的窗口将充当向其他窗口发送/接收消息的代理。它会有一些像这样的代码：

 window.addEventListener('message', (event) => {
    event.preventDefault();
    const message = event.data;
    console.log(`viewer window is broadcasting message from webview: ${JSON.stringify(event.data)}`);
    chrome.runtime.sendMessage(event.data);
});

const webview = document.querySelector('webview');
webview.addEventListener('loadstop', () => {
    webview.contentWindow.postMessage({from: 'app', cmd: 'init'}, webview.src);
});

function handleMessage(message) {
    if (message.from === 'anotherwindow') {
        console.log('webview window received message from another window, sending it to webview');
        webview.contentWindow.postMessage(message, webview.src);
    }
}

chrome.runtime.onMessage.addListener(handleMessage);

【讨论】：