如何在同一 chrome 应用程序的多个窗口之间进行通信答案

【问题标题】：How to communicate between multiple windows of same chrome apps如何在同一 chrome 应用程序的多个窗口之间进行通信
【发布时间】：2015-08-24 01:02:11
【问题描述】：

我有一个包含多个窗口的打包 chrome 应用程序。例如，如果我单击第一个窗口中的按钮，则会打开第二个窗口。现在如何互相发送消息或命令。我已经阅读了很多关于它的内容，但没有弄清楚，因为我对此很陌生。任何示例代码都会很有帮助。

有一个问题How to communicate between multiple windows of the same chrome app?，但不明白怎么做。

提前致谢！！！

【问题讨论】：

标签： javascript google-chrome google-chrome-app

【解决方案1】：

您可以使用窗口的 postmessage 方法，以便将信息发送到另一个窗口。通过遵循这种方法，您可以在不同的窗口 (B) 上从窗口 (A) 执行方法。您需要在窗口 B 上创建一个事件，通知 A 该方法运行正确。

代码类似于：

发件人：

//create popup window
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');

//periodical message sender
setInterval(function(){
    var message = 'Hello!  The time is: ' + (new Date().getTime());
    console.log('blog.local:  sending message:  ' + message);
    myPopup.postMessage(message,domain); //send the message and target URI
},6000);

//listen to holla back
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://scriptandstyle.com') return;
    console.log('received response:  ',event.data);
},false);

目的地：

//respond to events
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://davidwalsh.name') return;
    console.log('message received:  ' + event.data,event);
    event.source.postMessage('holla back youngin!',event.origin);
},false);

你也可以在这里找到深入的解释：http://davidwalsh.name/window-postmessage

【讨论】：

【解决方案2】：

如果是 Chrome 应用，关于域的部分不是必需的。

你需要这样的东西：

targetWindow = chrome.app.window.get("window-id").contentWindow;
targetWindow.postMessage(message, "*");

发送消息，同时接收：

window.addEventListener('message', function(event) {
  var windowId = chrome.app.window.current().id;

  console.log(windowId + ': received a message: ' + event.data, event);
  var message = 'hello back!';
  console.log(windowId + ': sending message: ' + message);            
  event.source.postMessage(message, event.origin);
});

【讨论】：