js-window.postMessage

window.postMessage是HTML5中新增的一个API（不能低于IE8）,postMessage方法允许来自不同源的脚
本采用异步方式进行有限的通信 ,使其可以实现跨文本档、多窗口、跨域消息传递，这个API为 window 对象
新增了一个window.postMessage方法，允许跨窗口通信，无论当前两个窗口否是同源。

一、postMessage( val1, val2 )
1 val1：传递的信息对象
2 val2：接受信息的窗口源（origin）协议+域名+端口号，如果设置为” * “表示不限制窗口源，向所有窗口源发送。

二、CODE

父级页面给子级页面传参

//a.html
<body>
    <div class='body'>
        <div class='left'>
            <p>LEFT</p>
            <button id='iframeEvent'>给子级页面传参</button>
        </div>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'></iframe>
        </div>
    </div>
    <script>
        var ifr = document.getElementById('ifrA');
        var send = document.getElementById('iframeEvent');
        //父级页面发送参数
        send.addEventListener('click', function() {
            var url = 'http://127.0.0.1:5500/b.html';//地址必须为服务器地址（本地文件打开无效）
            var val = '我是父级页面过来的参数';//传递的参数
            ifr.contentWindow.postMessage(val, url)
        }, false)
    </script>
</body>

//b.html
<body>
    <p class='title'>我是子级页面</p>
    <script>
        window.addEventListener('message', function(event) {
            var url = 'http://127.0.0.1:5500';//指定的源
            if (event.origin != url) {//判断是否来自指定源
                return;
            }
            console.log(event.data);//读取传递过来值
        }, false)
    </script>
</body>

父页面给子级页面传参.png

子级页面给父级页面传参

//a.html
<body>
    <div class='body'>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'></iframe>
        </div>
    </div>
    <script>
        //接送参数
        window.addEventListener('message', function(e) {
            var url = 'http://127.0.0.1:5500';
            if (e.origin != url) {
                return;
            }
            console.log(e.data);
        }, false)
    </script>
</body>

//b.html
<body>
    <button class='childPage'>给父页面传递参数</button>
    <script>
        //发送子级页面的参数给父级页面
        var btnEvent = document.querySelector('.childPage');
        var data = '我是子级页面传递过来的参数';
        btnEvent.addEventListener('click', function(e) {
            window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
        }, false)
    </script>
</body>

子级页面给父级页面传参数.png

完整的两个窗口通信

//a.html
<body>
    <div class='body'>
        <div class='left'>
            <p>LEFT</p>
            <button id='iframeEvent'>给子级页面传参</button>
        </div>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'>
            </iframe>
        </div>
    </div>
    <script>
        var ifr = document.getElementById('ifrA');
        var send = document.getElementById('iframeEvent');
        //给子级页面发送消息
        send.addEventListener('click', function() {
            var val = '我是父级页面过来的参数';
            ifr.contentWindow.postMessage(val, 'http://127.0.0.1:5500/b.html')
        }, false)

        //接送参数
        window.addEventListener('message', function(e) {
            var url = 'http://127.0.0.1:5500';
            if (e.origin != url) {
                return;
            }
            console.log(e.data);
        }, false)
    </script>
</body>

//b.html
<body>
    <p class='title'>我是子级页面</p>
    <button class='childPage'>给父页面传递参数</button>
    <script>
        //接受父级页面传递过来的参数
        window.addEventListener('message', function(event) {
            var url = 'http://127.0.0.1:5500';
            if (event.origin != url) {
                return;
            }
            console.log(event.data);
        }, false)

        //发送子级页面的参数给父级页面
        var btnEvent = document.querySelector('.childPage');
        var data = '我是子级页面传递过来的参数';
        btnEvent.addEventListener('click', function(e) {
            window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
        }, false)
    </script>
</body>

最后编辑于：2018.07.16 21:13:08