我需要能够从Chrome应用程序通过Webview发送postMessage到主页,然后再返回。
我已经建立了从Chrome应用程序到主页的PostMessage,并且主页也捕获了PostMessage并发送了一个新的回复,但是这个PostMessage回复没有被Chrome应用程序捕获。
我可以看到在Chrome-App API上是可能的。: 来宾将能够通过在收到消息事件上向 event.source 发送消息来向嵌入器发送回复。 所以问题是,即使我使用event.source.postMessage('', event.origin)发送回复,我也无法让Chrome应用程序捕获主页的回复。background.js末尾的window.addEventListener('message', messageHandler, false);是否有误?
我在下面包含了我的代码.: background.js(Chrome应用程序的初始化位置)。
我已经建立了从Chrome应用程序到主页的PostMessage,并且主页也捕获了PostMessage并发送了一个新的回复,但是这个PostMessage回复没有被Chrome应用程序捕获。
我可以看到在Chrome-App API上是可能的。: 来宾将能够通过在收到消息事件上向 event.source 发送消息来向嵌入器发送回复。 所以问题是,即使我使用event.source.postMessage('', event.origin)发送回复,我也无法让Chrome应用程序捕获主页的回复。background.js末尾的window.addEventListener('message', messageHandler, false);是否有误?
我在下面包含了我的代码.: 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(带有webview标签的HTML文件):
<!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>