postMessage的使用,不同页面嵌套后的传值

大框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大框</title>
</head>
<body>
<h2>我是大框</h2>
<iframe src="https://www.word.com:22599/PostMessage/test.html" frameborder="0"></iframe>
<script>
    window.onload = function () {
        //在页面加载完成后主页面向小框发送请求
        console.log("我是大框,现在给小框发数据,小框你收到数据没?")
        window.frames[0].postMessage('我是大框,现在给小框发数据,小框你收到数据没?', '*');
    }
    // 主页面监听小框message事件,
    window.addEventListener('message', function (e) {
        var data = e.data;
        console.log("小框小框,我是大框,收到你的数据:-->" + data)
        // document.querySelector('p').innerHTML = data;
    }, false);
</script>
</body>
</html>

小框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小框</title>
</head>

<body>
<h1>haha</h1>
<button type="button" onclick="pi()">按钮</button>
<script>
    function pi() {
        var a = "我是小框,现在给大框发啊数据pipi"
        console.log(a)
        //iframe接收消息，把信息发送给主页面
        window.parent.postMessage(a, '*');
    }

    // 监听主页面message事件,
    window.addEventListener('message', function (e) {
        var data = e.data;
        // document.querySelector('p').innerHTML = data;
        console.log("大框你好,我是小框,收到了这句话:-->" + e.data);
    }, false);
</script>
</body>

</html>

传的值可以为json对象

__EOF__

本文作者：皮军旗
本文链接：https://www.cnblogs.com/pijunqi/p/14480257.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！