Question

我有2个网站，我想在它们之间使用javascript postMessage。在我的主站点上，我在一个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>

并且在我想从i调用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（＆＃39;确定＆＃39;！）;或console.log（事件）;的console.log（event.data）;

不会在主站点的控制台上触发，

该怎么办？感谢

Answer 1

除了您在接收页面的代码中间有<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>

javascript postmessage不起作用

1 个答案: