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对象

 

posted @ 2021-03-04 14:51  皮军旗  阅读(284)  评论(0)    收藏  举报