Javascript 使用postMessage对iframe跨域传值或通信

实现目标：两个网站页面实现跨域相互通信
当前例子依赖于 jQuery 3.0

父页面代码：www.a.com/a.html

<iframe id="myIframe" src="http://www.b.com/b.html"></iframe> <script>
var $myIframe = $('#myIframe');
// 注意：必须是在框架内容加载完成后才能触发 message 事件哦
$myIframe.on('load', function(){
    var data = {
        act: 'article',  // 自定义的消息类型、行为，用于switch条件判断等。。
        msg: {
            subject: '跨域通信消息收到了有木有~', 
            author: 'abcdefg'
        }
    };
    // 不限制域名则填写 * 星号, 否则请填写对应域名如 http://www.b.com
    $myIframe[0].contentWindow.postMessage(data, '*');
});

// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
    if (e.data.act == 'response') {
        alert(e.data.msg.answer);
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
}, false);
</script>

子页面代码：www.b.com/b.html

<script>
// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
    if (e.data.act == 'article') {
        alert(e.data.msg.subject);
        // 向父窗框返回响应结果
        window.parent.postMessage({ 
            act: 'response', 
            msg: {
                answer: '我接收到啦！'
            }
        }, '*');
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
}, false);
</script>

或子页面的 按钮直接触发： 

//向父窗框返回结果
window.parent.postMessage({ act: 'response', msg: { answer: '我接收到啦3321！'} }, '*');  

 

 

 

//********************************************************************************************************************************

方案二：

        <script src="../js/layui/layui.js?v=12" charset="utf-8"></script>

   <iframe id="myIframe" src="http://localhost:8633/WebForm2.aspx"></iframe>
    <script>
        layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function () {
            var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

            // 注册消息事件监听，对来自 myIframe 框架的消息进行处理
            window.addEventListener('message', function(e){
                if (e.data.act == 'response') {
                    alert(e.data.msg.answer);
                    
                    parent.$('#series_name').val('我被改变了');
                    parent.layer.closeAll(); //疯狂模式，关闭所有层
                      
                } else {
                    alert('未定义的消息: '+ e.data.act);
                }
            }, false);

        });
</script>