Question

我需要能够通过网页浏览器将Chrome应用程序中的postMessage发送到主页并返回。

我已经将Chrome应用程序中的PostMessage建立到主页，并且主页也捕获了PostMessage，并且发回了新的PostMessage，但Chrome应用程序未捕获此PostMessage回复。

我可以看到它可以在Chrome-App API上使用。

The guest will be able to send replies to the embedder by posting message to event.source on the message event it receives.

所以问题是我无法让Chrome应用程序从主页上收到回复，即使我使用event.source.postMessage（''，event.origin）发送回复。是window.addEventListener（'message'，messageHandler，false）;在background.js的末尾错了？

我在下面添加了我的代码。：

background.js （Chrome应用初始化的位置）。：

  var myAppWin = null;
  var webview = null;

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

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

        myAppWin = win;
        myAppWin.contentWindow.addEventListener('DOMContentLoaded', function() {

          webview = myAppWin.contentWindow.document.getElementById('webview');

          try{
            webview.addEventListener("contentload", function () {

              console.log("webview content is now loaded");

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

            });
          }
          catch(err) {
            console.log("Webview error: " + err);
          }

        });
  });

  //Event listnener for the PostMessage reply    
  var messageHandler = function(event) {
    console.log("got message from page back: " + event.data);
  };
  window.addEventListener('message', messageHandler, false);



});

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

<!DOCTYPE html>
<head>
<title>webview</title>
</head>
<body style='margin:0;padding:0;' >
    <webview src="http://localhost" style="width:100%;height:100%;" id="webview" ></webview>
</body>
</html>

index.html （网络主页，需要抓住第一个PostMessage并将回复发送回Chrome应用）。：

<!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>

    //Used to catch messages from the Chrome App and reply back 
    var messageHandler = function(event) {
      console.log('Message received fom APP!');
      try{
        console.log(event);
        event.source.postMessage("Message from page", event.origin);
        console.log("Sent massage back to APP");
      }catch(error){
        console.log("Error on postMessage back to APP" + error);
      }

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

    </script>
    </body>
</html>

Answer 1

感谢您的投入。找到了解决方案！

我制作了一个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,
    }
  });
});

和网站上的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>

使用PostMessage在Chrome-app和主页之间进行通信

1 个答案: