草庐IT

javascript - Chrome 应用程序与主页之间的通信与 PostMessage

coder 2025-03-16 原文

我需要能够通过 WebView 从 Chrome 应用向主页发送 postMessage 并返回。

我已经建立了从Chrome App到首页的PostMessage,这个PostMessage也被首页抓到了并且发回了一个新的,但是这个PostMessage回复却没有被Chrome App抓到。

我可以在 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>

最佳答案

感谢您的输入。找到了解决方案!

我做了一个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>

关于javascript - Chrome 应用程序与主页之间的通信与 PostMessage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25949427/

有关javascript - Chrome 应用程序与主页之间的通信与 PostMessage的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  3. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  4. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  5. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  8. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  9. ruby - #之间? Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中,第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  10. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别? - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上,我看到了这样几行:我不明白为什么不这样写:在这种情况下,||=和ifnil?有什么区别? 最佳答案 在这种特殊情况下没有区别,但可能是出于习惯。每当我看到nil?被使用时,它几乎总是使用不当。在Ruby中,很少有东西在逻辑上是假的,只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false,因为它具有相同的结果,但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

随机推荐