我有 2 个站点,我想在它们之间使用 javascriptpostMessage
。
在我的主站点上,我在空的 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>
在其他我想调用邮寄消息的网站上,我编写了以下代码:
<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(事件.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);
相反,更好的方法是让子页面在加载时通知父页面。然后 parent 和 child 可以可靠地沟通。
这里是完整的更正代码,首先发送页面:
<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>
关于javascript postmessage 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44770308/