Layer子iframe传数据到父页面的两种方式【按钮和非按钮】

以下两种方式均实测通过，按钮式通信如下，

首先是父页面的js代码

<script>
    //表单组件的渲染
    function form_open(){
        layer.open({
            title:'<i class="bi-table" style="font-size: 1rem; ">表单</i>'
            ,btn:['确定']
            ,type: 2
            ,maxmin: true //开启最大化最小化按钮
            ,content: 'form.html'
            ,area: ['344px', '100%']
            ,offset: 'lt' //左上角
            ,anim: 4
            ,shade:false
            ,yes: function (index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                var iframeModel = iframeWin.GetValue();//接收iframe传递过来的值
                //console.info(iframeModel);
                if (iframeModel != null) {
                    $("#design_div").append(iframeModel);
                    layer.close(index);
                }
                else {
                    layer.msg("请选择组件！");
                    layer.close(index);
                }
            }
        });
    } 
</script>

父页面的代码核心在于下面这两句，其中GetValue()函数是子页面中的

var iframeWin = window[layero.find('iframe')[0]['name']];  //这两句很重要
var iframeModel = iframeWin.GetValue();               //接收iframe传递过来的值

下面是子页面的js代码：

<script>
    var currentModel = $ ("#input-div").prop("outerHTML");
    console.log(currentModel);

    function GetValue() {
        return currentModel;//还可以传递对象
    }
</script>

以上父页面和子页面的代码实现效果：当父页面点击触发“layer.open”事件，打开子页面iframe，当子页面操作完数据，点击子页面iframe中的按钮，会触发GetValue事件将对应的数据传给父页面，父页面在对应的按钮响应事件进行捕获数据

PS：var iframeWin = window[layero.find('iframe')[0]['name']]; 这句代码有博主说可以当成取得子页面的全局对象Window将其保存到iframeWin中，我个人觉得非常有道理,可以以此为参考进行操作和理解

下面介绍非按钮式传递数据，子页面【iframe】js代码如下：

<script>
        //    post_data后面跟着的是父页面的地址
        var post_data = '123231232';
        window.parent.postMessage(post_data,'http://localhost/demo/header.html');
</script>

父页面的js代码如下：

<script>
    //  date就是子页面传过来的数据,如果要传多个数据，可以用json
    window.addEventListener('message',function(e){
        var Date=e.data;
        console.log(Date);
    },false);
</script>

此方式应用场景：比如子页面进行拖拽操作，需要传输数据到父页面时候，当子页面进行拖拽，就传输数据到父页面，如此不需要按钮触发