使用PostMessage在Chrome-app和主页之间进行通信 [英] Communication between Chrome-app and a homepage with PostMessage
问题描述
我需要能够将Chrome应用程序中的postMessage通过webview发送到主页并返回。
I need to be able to send postMessage from a Chrome App through a webview to the homepage and back.
我已将Chrome应用程序中的PostMessage建立到主页，主页也会收到PostMessage，并会发送一个新邮件，但Chrome应用程序不会捕获此PostMessage回复。
I have established PostMessage from the Chrome App to the homepage, and the PostMessage is also catched by the homepage and a new one is send back, but this PostMessage reply is not caught by the Chrome App.
我可以看到它可以在Chrome-App API上使用。：
I can see that it is possible on the Chrome-App API.:
客人将能够通过在收到的消息事件上向event.source发送消息来向嵌入者发送回复。
所以问题是我无法让Chrome应用程序从主页上收到回复，即使我使用的是event.source.postMessage（''， event.origin）发送回复。是window.addEventListener（'message'，messageHandler，false）;在background.js的末尾错了？
So the problem is that i cannot get the Chrome App to catch the reply from the homepage, even though i am using event.source.postMessage('', event.origin) the send the reply with. Is the window.addEventListener('message', messageHandler, false); at the end of background.js wrong ?
我在下面包含了我的代码。：
I have include the my code below.:
background.js （Chrome应用初始化的地方）。：
background.js (where the Chrome app is initialized).:
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 （带有webview标记的html文件）。 ：
webview-embed.html (html file with the webview 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 （网页上的主页，需要抓住第一个PostMessage并将回复发送回Chrome应用。）：
index.html (the homepage on the web, that needs to catch the first PostMessage and sent a reply back to the 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>
推荐答案
感谢您的输入。找到了解决方案！
Thanks for the input. Found a solution!
我制作了一个webview.js并将其加载到webview-embed.html
I made a webview.js and loaded it 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);
清理我的background.js
Cleaned up my 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。：
and the index.html on the 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>
这篇关于使用PostMessage在Chrome-app和主页之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
