父页面iframe中的第三方子页面跨域交互技术—postMessage实现方法

win.postMessage(data, origin)
// win 这个参数为需要接受消息的 window 对象
// 当我们通过 window.open() 打开一个新窗口时，会返回一个新窗口的 window 对象，通过这个新窗口的 window 对象，就可以向新窗口发送消息
// 如果页面中有 frame 时，也可以通过这个 frame 对象发送消息
// data 为我们想要发送的数据，理论上 data 可以是任何可以被复制的数据类型，但是由于部分浏览器只支持传输 String 类型，所以传输的数据最好是通过 JSON.stringify() 序列化后再传输
// origin 为字符串，为目标窗口的源，由 协议+ip/域名+端口号 组成
// 如果想要传递给任意窗口，可以将这个参数设置为 * ，为了安全起见，不建议设置为 *
// 如果目标窗口与当前窗口同源，则设置为 /

window.addEventListener('message', function (e) {...})
// 第一个参数为这个事件监听器的类型，'message' 表示会监听当前窗口接收到的消息
// 第二个参数为接收到消息后的回调函数，在回调函数中，我们可以对发送消息的源进行一些验证，从而保证安全性
// 回调函数参数 e 上有很多属性，我们可以将其打印出来，其中 origin 表示发送消息窗口的源；source 属性表示发送消息的窗口，通过 e.source == window.opener 可以判断发送消息的窗口与打开当前页面的窗口是否为同一个；data 属性标书传递过来的数据

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

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