当在一个页面点击一个按钮后弹出一个iframe，如何让改页面的数据传到子页面iframe的文本框等。以下演示的是把layui表格中当前行数据传到子页面，常用情况：编辑
本内容相关的项目实现系统已发布点此查看，收银员账号密码：1001密码123，源码可以到主页下载
layui表格的cols

		cols:
                [[
                    {type: "checkbox", fixed: "left"},

                    {field: 'gid', width: 80, title: 'ID', sort: true,align:"center"},
                    {field: 'gno', width: 110, title: '商品编号',align:"center"},
                    {field: 'gname', width: 200, title: '商品名称', sort: true,align:"center"},

                    {field: 'price', title: '原价', minWidth: 80, sort: true,align:"center"},
                    {field: 'isBargainPrice', width: 110, title: '是否特价',align:"center"},
                    {field: 'bargainPrice', width: 110, title: '特价价格', sort: true,align:"center"},
                    {field: 'unit', title: '单位', minWidth: 80, sort: true,align:"center"},
                    {field: 'stock', width: 110, title: '库存余量', sort: true,align:"center"}
                    , {title: '操作',width:120, toolbar: '#currentTableBar', align: "center", fixed: "right"}

                ]],

我这里是通过点击layui的tool的编辑按钮（表格行的最后的按钮）弹出一个iframe，下面是点击按钮后传输数据的方法，同时打开子页面

 if (obj.event === 'edit'&&identify=="管理员") {

                var index = layer.open({
                    title: '编辑商品',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/editGoods',
                    success:function () {
                        //表单数据回显，把表格当前行显示到子页面的表单内，find后括号内的是子页面表单的id
                        var body = layer.getChildFrame('body',index); body.find("#gid").val(data.gid);
                        var body = layer.getChildFrame('body',index); body.find("#gno").val(data.gno);
                        var body = layer.getChildFrame('body',index); body.find("#gname").val(data.gname);
                        var body = layer.getChildFrame('body',index); body.find("#price").val(data.price);
                        var body = layer.getChildFrame('body',index); body.find("#bargainPrice").val(data.bargainPrice);
                        var body = layer.getChildFrame('body',index); body.find("#unit").val(data.unit);
                        var body = layer.getChildFrame('body',index); body.find("#stock").val(data.stock);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } 

子页面iframe的代码，表格数据都将映射到对应id的表单内，编辑完成后有一个保存按钮，点击保存按钮则关闭当前子页面。

<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">当前商品id</label>
        <div class="layui-input-block">
            <input type="text" name="gid" readonly="readonly" id="gid" lay-verify="required"
                   value="" class="layui-input">
            <tip>不可编辑。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品编号</label>
        <div class="layui-input-block">
            <input type="text" readonly="readonly" lay-verify="number|required" placeholder="请输入卡号"name="gno" id="gno"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">商品名称</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" name="gname" id="gname" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">原价</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="required|number" name="price" id="price" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">是否特价</label>
        <div class="layui-input-inline">
            <select name="isBargainPrice" id="isBargainPrice">

                <option value="是">是</option>
                <option value="否">否</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">特价价格</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="required|number" name="bargainPrice" id="bargainPrice" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">单位</label>
        <div class="layui-input-inline">
        <select name="unit" id="unit" lay-search="">
            <option value="斤"> 斤</option>
            <option value="个"> 个</option>
            <option value="瓶"> 瓶</option>
            <option value="盒"> 盒</option>
            <option value="箱"> 箱</option>
            <option value="本"> 本</option>
            <option value="根"> 根</option>
            <option value="提"> 提</option>
            <option value="串"> 串</option>
            <option value="罐"> 罐</option>
            <option value="袋"> 袋</option>
            <option value="件"> 件</option>
            <option value="千克">千克</option>
            <option value="双"> 双</option>
            <option value="台"> 台</option>
            <option value="只"> 只</option>
            <option value="支"> 支</option>
            <option value="张"> 张</option>
            <option value="捆"> 捆</option>
            <option value="部"> 部</option>
            <option value="辆"> 辆</option>
            <option value="包"> 包</option>

        </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">库存</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="required|integer" name="stock" id="stock" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
</div>

保存按钮退出iframe事件，当然数据也将传送到后端

//监听提交
        form.on('submit(saveBtn)', function (data) {

            var goods = JSON.stringify(data.field)
            $.ajax({
                type: "POST",
                url: "/updateGoods",
                data:goods,
                contentType: "application/json;charset=utf-8",
                //async:false,
                success: function (result) {
                    if (result == "更新失败") {
                        alert("网络不佳！请稍后重试")
                    }

                },
                error: function (data, status, e) {
                    alert("网络不佳！请稍后重试");
                }
            })


            var index = layer.alert("修改成功", {
                title: '提示'
            }, function () {

                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                //更新父页面的表格
                window.parent.location.reload();
                parent.layer.close(iframeIndex);

            });

            return false;
        });

 layui中修改页面layer.open弹出层给子页面赋值

layer.open({
        title: '信息维护',
        type: 2, shade: false, maxmin: true,
        shade: 0.5, anim: 1, area: ['850px', '95%'],
        content: basePath+'/jsp/info.jsp',
        success: function(layero, indexx){
            var obj={name:'张三',sex:'1'};
           
            var body = layer.getChildFrame('body', indexx);
            //获取content的窗口
            var iframeWin = layero.find('iframe')[0].contentWindow;
            body.find("#name").val(obj.name);
            body.find("#sex").val(obj.sex);
            iframeWin.layui.form.render();
        }
    });

 layui中修改页面layer.open弹出层给父页面赋值

layer.open({
        title: '信息维护',
        type: 2, shade: false, maxmin: true,
        shade: 0.5, anim: 1, area: ['850px', '95%'],
        content: basePath+'/jsp/info.jsp',
        success: function(layero, indexx){
           var pIframe = $('iframe')[0].contentWindow.document;//找到上一级父页面
           var subForm = $(pIframe).find('#updatefm');
            /* 指定id直接赋值
        subForm.find('#_DATE').val(obj.VC_DATE);
                    subForm.find('#VC_PERSONS').val(obj.VC_PERSONS);
                    */

                //将表单序列化，挨个赋值
                    var dd = $(subForm).serializeArray();
                    $.each(dd, function (i, item) {
                        subForm.find('#' + item.name).val(obj[item.name]);
                    });
                    $('iframe')[0].contentWindow.renderform();
        }
    });

 

父页面:
<button class="layui-btn" data-type="getCheckData">
	<i class="layui-icon">&#xe61f;</i>修改
</button>

父页面js:
getCheckData:function () {
   var checkStatus = table.checkStatus('workerList');
   console.log(checkStatus)
   data = checkStatus.data;
   //console.log(data)
   if (data.length==1) {
      layer.open({
         title: this.text,
         type: 2,
         skin: 'layui-layer-rim', //加上边框
         area: [window.screen.width / 2 + 'px', window.screen.height / 2 + 'px'], //宽高
         maxmin: true, //开启最大化最小化按钮
         content: "edit.html",
         success: function (layero, index) {
            // 获取子页面的iframe
            var iframe = window['layui-layer-iframe' + index];
            // 向子页面的全局函数child传参
            iframe.child(data);
         }
      })
   } else {
      alert("请选择一行")
   }
}

子页面:写入单独的js文件 元素属性获取不到
<script>
    function child(data) {
        $("input[name='workerId']").val(data[0].worker_id);
        $("input[name='account']").val(data[0].account);
        $("input[name='password']").val(data[0].password);
        $("input[name='carameId']").val(data[0].carame_id);
        $("input[name='workCityNames']").val(data[0].work_city_names);
    }
</script>



ps:有什么问题多多指教

也是从网上找的方法 记录下来。

layer.open({
    type: 2,
    title: '修改用户',
    shadeClose: true,
    //shade: 0.8,
    area: ['600px', '300px'],
    content: '/cate/admin-edit?id='+id,
    success : function(layero, index) {
        var body = layer.getChildFrame('body', index); //得到子页面层的BODY
        //查找body旗下input框，设置框内默认值为：applicant
        body.find('#HiddenVal').val(cateid);
    }
});