Devo essere in grado di inviare postMessage da un'app Chrome tramite una webview alla home page e viceversa.Comunicazione tra Chrome-app e una homepage con PostMessage
Ho impostato PostMessage dall'app Chrome alla home page e PostMessage viene anche richiamato dalla home page e ne viene rispedito uno nuovo, ma questa risposta PostMessage non viene rilevata dall'app Chrome.
posso vedere che è possibile sulle API Chrome-App .:
Quindi il problema è che io non riesco a ottenere l'App di Chrome per catturare la risposta dalla homepage, anche se ho sto usando event.source.postMessage ('', event.origin) con cui inviare la risposta. È window.addEventListener ('message', messageHandler, false); alla fine di background.js sbagliato?
ho includono il mio codice qui sotto .:
background.js (dove viene inizializzata l'applicazione 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 file di (html con il tag 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 (th e homepage sul web, che ha bisogno di prendere il primo PostMessage e inviato una risposta indietro al Chrome-app) .:
<!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>
Non ho diagnosticato l'intero problema, ma parte di esso potrebbe essere che si stanno utilizzando variabili globali nel background.js per conservare i dati, e a non funzionerà in una pagina evento, perché è scaricata e ricaricata secondo necessità. (Viene ricordato solo il fatto che alcuni gestori di eventi sono stati impostati, ma non i gestori stessi.) –
È necessario inviare e ricevere il messaggio dalla pagina di sfondo? Se si invia il messaggio dalla pagina principale dell'app, dovrebbe funzionare, ovvero inviarlo dal JavaScript di webview-embed.html – lazyboy
@lazyboy Vorrei fare una [notifica] (https://developer.chrome.com/app/notifiche) quando un evento (messaggio in arrivo) sta accadendo sulla pagina web, sai se può essere raggiunto in un modo diverso? – Nederby