Javascript Chrome应用程序与带有PostMessage的主页之间的通信_Javascript_Webview_Google Chrome App_Postmessage

Javascript Chrome应用程序与带有PostMessage的主页之间的通信

javascript webview

Javascript Chrome应用程序与带有PostMessage的主页之间的通信,javascript,webview,google-chrome-app,postmessage,Javascript,Webview,Google Chrome App,Postmessage,我需要能够发送邮件从一个Chrome应用程序通过网络视图到主页和返回我已经建立了从Chrome应用程序到主页的PostMessage，主页也会捕获PostMessage，并发送回一条新的PostMessage，但Chrome应用程序不会捕获此PostMessage回复我可以在Chrome应用程序API上看到这一点：所以问题是，即使我使用event.source.postMessage（“”，event.origin）发送回复，我也无法让Chrome应用程序从主页捕获回复。是窗口。addE

我需要能够发送邮件从一个Chrome应用程序通过网络视图到主页和返回

我已经建立了从Chrome应用程序到主页的PostMessage，主页也会捕获PostMessage，并发送回一条新的PostMessage，但Chrome应用程序不会捕获此PostMessage回复

我可以在Chrome应用程序API上看到这一点：

所以问题是，即使我使用event.source.postMessage（“”，event.origin）发送回复，我也无法让Chrome应用程序从主页捕获回复。是窗口。addEventListener（'message'，messageHandler，false）；在background.js的末尾出错了吗

我已将我的代码包括在下面：

background.js（Chrome应用程序在此初始化）：

webview embed.html（带有webview标记的html文件）：


网络视图

index.html（网络上的主页，需要捕捉第一条PostMessage并将回复发送回Chrome应用程序）：


标题
//身体
//用于捕获来自Chrome应用程序的消息并回复
var messageHandler=函数（事件）{
log（'messagereceived fom APP！'）；
试一试{
console.log（事件）；
event.source.postMessage（“来自页面的消息”，event.origin）；
console.log（“发送回应用程序”）；
}捕获（错误）{
log（“返回应用程序的postMessage上的错误”+错误）；
}
};
addEventListener（'message'，messageHandler，false）；

谢谢您的输入。找到了解决办法

我制作了一个webview.js并将其加载到webview-embed.html中

var messageHandler = function(event) {
  console.log("Got message from webpage back: " + event.data);
};

webview = document.getElementById('webview');
webview.addEventListener("contentload", function () {
  try{
    console.log("Trying to post message");
    webview.contentWindow.postMessage("Message from Chrome APP!", "*");
  }catch(error){
    console.log("postMessage error: " + error);
  }

});
window.addEventListener('message', messageHandler, false);

清理了我的background.js

chrome.app.runtime.onLaunched.addListener(function() {
  // Center window on screen.
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;

  var chromeWindow = chrome.app.window.create('webview-embed.html', {
    id: "helloWorldID",
    bounds: {
      width: screenWidth,
      height: screenHeight,
    }
  });
});

以及web上的index.html：

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>title</title>
    </head>
    <body >
    <div id="wrapper" >
        //body
    </div>
    <script>
    var messageHandler = function(event) {

      console.log('Message received fom APP!');

      try {
        event.source.postMessage("Message from webpage", "*");
        console.log('message send back to get catched by webview');
      } catch(error) {
        console.log("Error on postMessage back to APP" + error);
      }

    };
    window.addEventListener('message', messageHandler, false);
    </script>
    </body>
</html>


标题
//身体
var messageHandler=函数（事件）{
log（'messagereceived fom APP！'）；
试一试{
event.source.postMessage（“来自网页的消息”，“*”）；
log（'messagesend back to get catch by webview'）；
}捕获（错误）{
log（“返回应用程序的postMessage上的错误”+错误）；
}
};
addEventListener（'message'，messageHandler，false）；

我还没有诊断出整个问题，但部分原因可能是您在background.js中使用全局变量来保留数据，而这在事件页面中不起作用，因为它会根据需要卸载和重新加载。（只会记住设置了某些事件处理程序的事实，而不会记住处理程序本身。）是否需要从后台页面发送和接收消息？如果您从应用程序的主页发送消息，它应该可以正常工作，即从webview嵌入的JavaScript发送消息。html@lazyboy当网页上发生事件（传入消息）时，我想提出一个建议，您是否知道是否可以通过其他方式实现？如果您同时拥有网页和分机，这可能是一种可能性：

var messageHandler = function(event) {
  console.log("Got message from webpage back: " + event.data);
};

webview = document.getElementById('webview');
webview.addEventListener("contentload", function () {
  try{
    console.log("Trying to post message");
    webview.contentWindow.postMessage("Message from Chrome APP!", "*");
  }catch(error){
    console.log("postMessage error: " + error);
  }

});
window.addEventListener('message', messageHandler, false);

chrome.app.runtime.onLaunched.addListener(function() {
  // Center window on screen.
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;

  var chromeWindow = chrome.app.window.create('webview-embed.html', {
    id: "helloWorldID",
    bounds: {
      width: screenWidth,
      height: screenHeight,
    }
  });
});

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>title</title>
    </head>
    <body >
    <div id="wrapper" >
        //body
    </div>
    <script>
    var messageHandler = function(event) {

      console.log('Message received fom APP!');

      try {
        event.source.postMessage("Message from webpage", "*");
        console.log('message send back to get catched by webview');
      } catch(error) {
        console.log("Error on postMessage back to APP" + error);
      }

    };
    window.addEventListener('message', messageHandler, false);
    </script>
    </body>
</html>