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

最新推荐文章于 2023-07-27 10:35:32 发布

Yetian_2000

最新推荐文章于 2023-07-27 10:35:32 发布

阅读量440

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Yetian_2000/article/details/119247236

版权

JS 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

父窗口

<!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>

Yetian_2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
postMessage，父传子的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(
复制链接

扫一扫