Comunicazione tra Chrome-app e una homepage con PostMessage

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 .:

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

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>

fonte

2014-09-20 Nederby

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

Grazie per l'input. Trovato una soluzione!

ho fatto un webview.js e caricati in 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);

ripulito il mio 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, 
    } 
    }); 
});

e l'index.html sul web .:

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

fonte

2014-09-22 14:32:30 Nederby

Comunicazione tra Chrome-app e una homepage con PostMessage

risposta

Problemi correlati