javascript postmessage 不起作用

标签 javascript html web frontend

我有 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/

相关文章:

javascript - 你如何重构一大块条件?

javascript - 如何通过 Google 跟踪代码管理器跟踪 Universal Analytics 事件?

javascript - 测试对象数组中是否存在值

javascript - 拉斐尔命中检测

html - 我无缘无故收到 Firefox 安全警告

javascript - 为什么我不能切换我的样式表?

javascript - 将文件上传到网站,调用Python脚本并以最轻量的方式下载生成的新文件

javascript - 如何在有背景颜色的情况下一张一张地粘标题?

html - vuetify 中的右对齐按钮

python - 对一个字段使用 wtform 验证时, "Not a valid choice"是什么意思?