Связь между Chrome-app и домашней страницей с PostMessage

Мне нужно отправить postMessage из приложения Chrome через веб-просмотр на домашнюю страницу и обратно.Связь между Chrome-app и домашней страницей с PostMessage

Я установил PostMessage из приложения Chrome на домашнюю страницу, а PostMessage также попал на домашнюю страницу, а новый отправлен обратно, но этот ответ PostMessage не попал в приложение Chrome.

я могу видеть, что это возможно на 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 App поймать ответ от главной страницы, хотя я я использую 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 (HTML файл с WebView тег) .:

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

источник

2014-09-20 Nederby

Я не поставил диагноз всей проблемы, но частью этого может быть то, что вы используете глобальные переменные в вашем background.js для хранения данных и at не будет работать на странице событий, потому что он будет выгружен и перезагружен по мере необходимости. (Только тот факт, что определенные обработчики событий были установлены, запоминаются, но не сами обработчики.) –

Вам нужно отправить и получить сообщение со справочной страницы? Если вы отправляете сообщение с главной страницы приложения, оно должно просто работать, то есть отправлять его с JavaScript webview-embed.html – lazyboy

@lazyboy. Я хотел бы сделать [уведомление] (https://developer.chrome.com/apps/уведомления), когда на веб-странице происходит событие (входящее сообщение), знаете ли вы, может ли оно быть достигнуто по-другому? – Nederby

Спасибо за вход. Нашли решение!

Я сделал 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>

источник

2014-09-22 14:32:30 Nederby

Связь между Chrome-app и домашней страницей с PostMessage

ответ

Смежные вопросы