postMessage，父传子的iframe示例（亲测有效）

最新推荐文章于 2024-09-11 07:57:51 发布

原创最新推荐文章于 2024-09-11 07:57:51 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

63 篇文章

订阅专栏

这篇博客详细介绍了如何在HTML中实现父窗口与子窗口之间的通信，通过使用`postMessage`方法进行消息传递。在父窗口中设置一个点击事件，触发向子窗口发送特定命令，而子窗口则监听`message`事件来接收并处理来自父窗口的消息。此技术在前端开发中用于不同窗口或iframe间的通信。

部署运行你感兴趣的模型镜像

父窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    function post(){
        var iframe=$("#iframe")
        iframe[0].contentWindow.postMessage({
            cmd: '401'
        })//接收消息的是  window.parent 窗口
    }
    $(function(){
        setTimeout(function(){
            var origin = window.location.origin
            origin = '/D:/test/postmessageAA.html'//之前一直失败就是因为，引用地址错了。
            $("#iframe").attr('src', origin)
        },1000)
    })
</script>
</head>
<body>
    <div onclick="post()">点击</div>
    <iframe id="iframe" name="iframe"></iframe>
</body>
</html>

子窗口

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//    这组C和D是正确的，但是出不了，可能iframe，嵌套有问题。（在无锡录播定制项目中是这样嵌入资源管理的。）
    $(function(){
        window.addEventListener('message', function(messageEvent) {
          console.log(messageEvent.data.cmd)
        }, false);
    })
</script>
</head>
<body>
<input type="button" value="child" />
</iframe>
</body>
</html>

您可能感兴趣的与本文相关的镜像