webview - 交叉消息网络视图和多个窗口

Question

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

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

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

我尝试从 Webview 中的页面玩 appWindow.source 但无法管理它。可能吗？有任何想法吗？

Answer 1

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

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

Answer 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);