我有2个网站,我想在它们之间使用javascriptpostMessage.
在我的主站点上,我在emty html文件中编写以下代码：
<html>
<script>
window.addEventListener("message",listener_,false);
function listener_(event) {
console.log('ok!');
<html>
<script>
window.addEventListener("message",listener_,false);
function listener_(event) {
console.log('ok!');
//console.log(event);
//console.log(event.data);
}
</script>
</html>
并在我要从其调用postmessage的其他站点中,编写以下代码：
<script type="text/javascript">
window.onload = function() {
testfunction();
};
function testfunction(){
var childWin = window.open("http://my-main-site.com/indexjava2.html","child");
childWin = postMessage('message','*');
console.log(TipaltiIframeInfo.height);
}
</script>
但经过大量尝试后仍无法正常工作.我的意思是
console.log(‘确定！’);或console.log(event); console.log(event.data);
不会在主站点的控制台上触发,
该怎么办？
谢谢
解决方法:
除了您拥有< script>和< html>标签位于接收页面的代码中间,并且您两次定义并添加了事件监听器,因此您也无法正确使用postMessage.代替这个：
childWin = postMessage('message', '*');
…应该是这样的：
childWin.postMessage('message', '*');
如果您想了解有关postMessage的更多信息,请访问read this.
另一个问题是,除非在发送邮件之前打开该页面,否则新打开的页面将不会接收到该消息.您正在尝试在打开新页面后立即发送消息,并且在添加事件侦听器之前,消息已到达新页面.您可以使用setTimeout来解决此问题,但是如果新页面的加载时间较长,那么这可能也不可靠.
// This is what NOT to do:
setTimeout(function() {
childWin.postMessage('message', '*');
}, 1000);
相反,更好的方法是让子页面告诉父页面何时加载.这样父母和孩子就可以可靠地交流.
这是完整的更正代码,首先发送页面：
<script>
var childWin;
window.addEventListener('message', messageListener, false);
function messageListener(event) {
if(event.data == 'ready') {
childWin.postMessage('hello second page', '*');
}
}
window.onload = function() {
childWin = window.open('http://my-main-site.com/indexjava2.htm', 'child');
};
</script>
和接收页面：
<script>
window.addEventListener('message', messageListener, false);
function messageListener(event) {
console.log(event.data);
}
window.opener.postMessage('ready','*');
</script>