如何在Chrome App中与WebView进行通信？

Question

我开发了一个网站,我打算在Chrome浏览器中的webview中显示.这很好用.

现在,我想从网站上使用postMessage,将消息从webview发送到包含的Chrome应用程序.这是通过top.postMessagewebview内部完成的.

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

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

webView.addEventListener('message', messageHandler);

window.addEventListener('message', messageHandler);

document.addEventListener('message', messageHandler);

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

除非我能让它工作,否则我正在考虑使用consolemessage从webview发送消息到容器 - 我发现这些消息没有吸引力,我怀疑它在不使用开发者模式时不起作用.

Answer 1

该网页流量样品有使用postMessage的一个应用程序,并在网页视图加载外部页面之间传递消息的一个很好的示范.

以下是关键代码.

1. 在应用程序中,收听loadstopwebview事件并向页面发送初始消息.您可以将此邮件限制为特定的域或页面.

   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/*");
   }
   

2. 在外部页面中,侦听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);
    } 
   }
   

3. 应用程序还应该监听message事件以从外部页面接收消息.

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