Kommunikation zwischen Chrome-App und einer Homepage mit PostMessage

Ich muss in der Lage sein, PostMessage von einer Chrome App über ein Webview auf die Homepage und zurück zu senden.Kommunikation zwischen Chrome-App und einer Homepage mit PostMessage

Ich habe PostMessage von der Chrome App auf der Homepage eingerichtet, und die PostMessage wird auch von der Startseite erfasst und eine neue wird zurückgesendet, aber diese PostMessage Antwort wird nicht von der Chrome App abgefangen.

Ich kann sehen, dass es auf dem Chrome-App-API möglich ist .:

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

Also das Problem ist, dass ich nicht die Chrome App die Antwort von der Homepage zu fangen bekommen können, obwohl ich benutze event.source.postMessage ('', event.origin) die sende die antwort mit. Ist der window.addEventListener ('Nachricht', messageHandler, false); am Ende von background.js falsch?

Ich habe beinhalten die meinen Code unten .:

background.js (wo die Chrome-App initialisiert wird) .:

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-Datei mit der Webansicht-Tag) .:

<!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 im Web, die die erste Postmessage fangen muss, und schickte eine Antwort zurück in die 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>

Quelle

2014-09-20 Nederby

Ich habe das ganze Problem nicht diagnostiziert, aber ein Teil davon kann sein, dass Sie globale Variablen in Ihrem background.js verwenden, um Daten zu behalten, und th funktioniert auf einer Event-Seite nicht, da sie nach Bedarf entladen und neu geladen wird. (Nur die Tatsache, dass bestimmte Ereignishandler gesetzt wurden, wird gespeichert, aber nicht die Handler selbst.) –

Müssen Sie die Nachricht von der Hintergrundseite senden und empfangen? Wenn Sie die Nachricht von der Hauptseite der App aus senden, sollte es einfach funktionieren, dh es wird vom JavaScript von webview-embed.html gesendet. – lazyboy

@lazyboy Ich möchte eine [Benachrichtigung] (https://developer.chrome.com/apps/notifications) wenn ein Ereignis (eingehende Nachricht) auf der Webseite passiert, weißt du, ob es auf andere Weise erreicht werden kann? – Nederby

Vielen Dank für die Eingabe. Eine Lösung gefunden!

machte ich ein webview.js und lud sie in Webansicht-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);

mein 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, 
    } 
    }); 
});

und die index.html auf dem Netz Aufgeräumt .:

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

Quelle

2014-09-22 14:32:30 Nederby

Kommunikation zwischen Chrome-App und einer Homepage mit PostMessage

Antwort

Verwandte Themen