javascript - 如何在 Chrome App 中与 WebView 通信？

Question

我开发了一个网站，我打算在 Chrome 应用程序中的 web View 中显示该网站。这工作正常。

现在，我想使用来自网站的 postMessage，将消息从 webview 发送到包含的 Chrome 应用程序中。这是通过 top.postMessage 完成的在 WebView 内。

我尝试了以下事件监听器:

webView.contentWindow.addEventListener('message', messageHandler);

webView.addEventListener('message', messageHandler);

window.addEventListener('message', messageHandler);

document.addEventListener('message', messageHandler);

我已成功实现以下事件监听器。所有这些都按预期工作:contentload , dialog和 consolemessage .

除非我能让它工作，否则我正在考虑使用 consolemessage将消息从 webview 发送到容器 - 我觉得这没什么吸引力，我怀疑在不使用开发人员模式时它不会工作。

Answer 1

webview sample有一个很好的演示使用 postMessage 在应用程序和加载在 web View 中的外部页面之间发送消息。

下面是关键的代码片段。

在应用程序中，聆听 loadstop webview 的事件并向页面发送初始消息。您可以将此消息限制为特定域或页面。

wv1.addEventListener('loadstop', sendInitialMessage);

function sendInitialMessage(e) {
 // only send the message if the page was loaded from googledrive hosting
 e.target.contentWindow.postMessage("initial message", "https://googledrive.com/host/*");
}

在外部页面，收听 message事件并保存源和起源。

window.addEventListener('message', onMessage);

var appWindow, appOrigin;

function onMessage(e) {
 appWindow = e.source;
 appOrigin = e.origin;
}

然后页面可以使用这些对象将消息发回应用程序。

function doSendMessage() {
 if (appWindow && appOrigin) {
  appWindow.postMessage("this is a message from the page!", appOrigin);
 } 
}

该应用程序还应收听 message从外部页面接收消息的事件。

window.addEventListener('message', function(e) {
 log("[???] messagereceived: " + e.data);
});